Выравнивание значка слева и текст в центр в ответном нативном

Question

Я пытаюсь использовать 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', 
    }, 

    }); 

Answer 1

Что вы можете сделать, установив значок в width и дать текст 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', 
    }, 

}); 

Answer 2

попробовать это:

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

    }); 

Answer 3

Я получил это работает с тем, что кажется немного рубить. Я добавил еще один значок справа от текста и сделал его тем же цветом, что и фон. Затем я дал МОЯ КНОПКА тексту сгибание 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, 
    },