在React Native中将图标对齐到左侧，文本居中

Question

我正在尝试使用弹性盒子布局来将我的图标对齐到按钮视图的左侧，而将文本居中。目前它们都居中对齐，但我不知道如何让我的图标在保持文本居中的同时在按钮的最左边缘。

现在我的按钮看起来像这样：

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

  });

- Stone Preston

Answer 1

您可以通过将图标设置为宽度并给文本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',
  },

});

- Asons

Answer 2

我用了一种看起来有点hack的方法让它工作了。我在文本右侧添加了另一个图标，并将其与背景颜色相同。然后我给我的按钮文本设置了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,
  },

- Stone Preston

Answer 3

<View style={{backgroundColor:'red',height:55,justifyContent:'center',flexDirection:'row',alignItems:'center'}}> <AntDesign name="arrowleft" color={'black'} size={30} /> <Text style={{textAlign:'center',fontSize:20,flex:1,marginLeft:-30}}>你好

- Rahul Jakhar

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 4

试试这个：

<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'
    },

  });

- Codesingh