在React Native中将图标向左对齐并将文本居中 [英] Align icon to left and text to center in react native

问题描述

我正在尝试使用flexbox将我的图标对准按钮视图的左侧，并将文本对准中心.目前它们都与中心对齐，但是我不确定如何将图标放在按钮的最左边缘，同时保持文本在视图中居中

I am trying to use flexbox to align my icon to the left of a button view and the text to the center. Currently they are both aligned to the center but I am not sure how to get my icon on the very left edge of the button while keeping the text centered in the view

现在我的按钮如下所示:

Right now my button looks like this:

我正在使用 https://github.com/APSL/react-native-button 用于按钮和 https://github.com/oblador/react-native-vector-icons用于图标

I am using https://github.com/APSL/react-native-button for buttons and https://github.com/oblador/react-native-vector-icons for 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

That you can do by setting icon to a width and give text padding-right, text-align and 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',
  },

});

这篇关于在React Native中将图标向左对齐并将文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！