我正在嘗試使用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',
    },

  });

你可以通過設置圖標的寬度，并賦予文本填充-右，文本對齊和伸縮: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',
  },

});

我用一個看起來有點像黑客的東西把它修好了。我在文本右側添加了另一個圖標，并使其與背景顏色相同。然后我給了我的按鈕文本一個flex 2。如果有人有更好的方法，我很想知道

<Button style={signupStyles.facebookButton}>
      <View style={signupStyles.nestedButtonView}>
        <Icon
          name="facebook"
          size={30}
          color={"white"}
          style={signupStyles.iconLeft}
        />
        <Text style={signupStyles.buttonText}>Continue with Facebook</Text>
        <Icon
          name="facebook"
          size={30}
          color={styleConstants.facebookColor}
          style={signupStyles.iconRight}
        />
      </View>
    </Button>

造型:

buttonText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
    flex: 2
  },

  iconLeft: {
    marginLeft: 10,
  },

  iconRight: {
    marginRight: 10,
  },

試試這個:

<Button style={signupStyles.facebookButton}>
      <View style={signupStyles.nestedButtonView}>
      <View style={signupStyles.iconstyle}>
        <Icon
          name="facebook"
          size={30}
          color={'white'}

        />
      </View>
        <Text style={signupStyles.buttonText}>Continue with Facebook</Text>
      </View>
    </Button>

var signupStyles = StyleSheet.create({
    buttonText: {
      color: 'white',
      fontWeight: 'bold',
      textAlign: 'center',
    },
    iconstyle:{
   // alignItems:'flex-start'
    }

    facebookButton: {
      backgroundColor: styleConstants.facebookColor,
      borderColor: styleConstants.facebookColor,
      borderWidth: 2,
      borderRadius: 22,
    },

    nestedButtonView: {
   //  flexDirection: 'row'
    },

  });

& ltview style = { { background color:' red '，height:55，justifyContent:'center '，flexDirection:'row '，align items:' center ' } } & gt； & ltAntDesign name = & quot向左箭頭& quotcolor = { ' black ' } size = { 30 }/& gt； & ltText style={{textAlign:'center '，fontSize:20，flex:1，margin left:-30 } } & gt；你好