我正在尝试使用flexbox将我的图标对准按钮视图的左侧,并将文本对准中心。目前,它们都与中心对齐,但是我不确定如何将我的图标放在按钮的最左边缘,同时使文本在视图中居中
现在,我的按钮如下所示:
我在按钮上使用https://github.com/APSL/react-native-button
https://github.com/oblador/react-native-vector-icons用于图标
以下是我的一些代码:
<Button style={signupStyles.facebookButton}>
<View style={signupStyles.nestedButtonView}>
<Icon
name="facebook"
size={30}
color={'white'}
/>
<Text style={signupStyles.buttonText}>Continue with Facebook</Text>
</View>
</Button>
var signupStyles = StyleSheet.create({
buttonText: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
facebookButton: {
backgroundColor: styleConstants.facebookColor,
borderColor: styleConstants.facebookColor,
borderWidth: 2,
borderRadius: 22,
},
nestedButtonView: {
flexDirection: 'row',
alignItems: 'center',
},
});
最佳答案
您可以通过将图标设置为width
并输入文本padding-right
,text-align
和flex:1
<Button style={signupStyles.facebookButton}>
<View style={signupStyles.nestedButtonView}>
<Icon
name="facebook"
size={30}
color={'white'}
/>
<Text style={signupStyles.buttonText}>Continue with Facebook</Text>
</View>
</Button>
var signupStyles = StyleSheet.create({
buttonText: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
facebookButton: {
backgroundColor: styleConstants.facebookColor,
borderColor: styleConstants.facebookColor,
borderWidth: 2,
borderRadius: 22,
},
nestedButtonView: {
flexDirection: 'row',
alignItems: 'center',
},
iconLeft: {
width: '40px',
},
buttonText: {
flex: 1,
paddingRight: '40px',
textAlign: 'center',
},
});
关于css - 在React Native中将图标左对齐并文本居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41516352/