如何解决React Native Flex Box:子组件的alignSelf不尊重父项的对正内容
在“响应本机”登录按钮中,我试图将图标水平居左和垂直放置在中心,文本放置在水平和垂直居中。在我将alignSelf定位为Icon的“中心”后,使用下面的代码将其垂直位置松开。根据文档alignSelf应该仅在横轴而不是主轴上遍历该属性。这里的图标是SVG图标。
const GoogleSignInBtn = ({style,onPress,children}) => {
const {buttonStyles,textStyle,iconStyle} = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyles}>
<GoogleIcon style={iconStyle} />
<Text style={textStyle}>{children}</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
color: '#007aff',fontSize: 16,fontWeight: '600',paddingTop: 10,paddingBottom: 10,},buttonStyles: {
justifyContent: 'center',alignItems: 'center',marginTop: 5,flex: 1,borderRadius: 5,borderWidth: 1,borderColor: '#007aff',marginLeft: 5,marginRight: 5,iconStyle: {
height: 20,width: 20,alignSelf: 'flex-start',[Screen Shot of output][1]};
解决方法
尝试
const styles = StyleSheet.create({
textStyle: {
color: '#007aff',fontSize: 16,fontWeight: '600',paddingTop: 10,paddingBottom: 10,marginHorizontal: 'auto',},buttonStyles: {
justifyContent: 'flex-start',alignItems: 'center',marginTop: 5,flex: 1,flexDirection: 'row',borderRadius: 5,borderWidth: 1,borderColor: '#007aff',marginLeft: 5,marginRight: 5,iconStyle: {
height: 20,width: 20,alignSelf: 'center',});
您确实覆盖了alignItems
,但是出于任何原因,您的flexDirection
都隐式设置为'column'
,因此图标被设置为弹性框的顶部。
将flexDirection
更改为'row'
可使项目水平放置,因此alignSelf
可以按需工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。