React Native Flex Box：子组件的alignSelf不尊重Parent的Justify Content

Question

在反应本机登录按钮中，我试图将图标水平向左和垂直放置在中心，并将文本水平和垂直放置在中心。使用下面的代码，只要我将 alignSelf 作为图标上的“中心”，它就会失去其垂直位置。根据文档 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]};

Answer 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 可以按需要工作。

此外，我使用marginHoritonal: auto 将文本居中。 有关这方面的更多信息，请参阅In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?。