Richten Sie das Symbol, um Links und text zu zentrieren, in reagieren nativen

Ich versuche, mit flexbox zu richten mein Symbol Links neben der Schaltfläche Ansicht und den text zentriert. Derzeit sind Sie beide ausgerichtet auf das Zentrum, aber ich bin nicht sicher, wie man meine-Symbol auf der äußersten linken Rand der Schaltfläche, während der text zentriert in der Ansicht

Recht jetzt mein button sieht so aus:

Richten Sie das Symbol, um Links und text zu zentrieren, in reagieren nativen

Ich bin mit https://github.com/APSL/react-native-button für buttons und
https://github.com/oblador/react-native-vector-icons für Symbole

Unten ist mein code:

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

  });

InformationsquelleAutor Stone Preston | 2017-01-07

  1. 10

    Dass Sie tun können, durch die Einstellung Symbol, um eine width und geben text padding-right, text-align und 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',
  },

});
    Funktioniert perfekt! Danke!

    InformationsquelleAutor LGSon

  2. 1

    Ich es geschafft habe mit dem, was scheint ein bisschen wie ein hack. Ich fügte hinzu, ein anderes Symbol auf der rechten Seite der text und es die gleiche Farbe wie der hintergrund. Dann habe ich meinen button-text ein flex-2. Wenn jemand einen besseren Weg, ich würde gerne wissen,

        <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>

    styling:

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

  iconLeft: {
    marginLeft: 10,
  },

  iconRight: {
    marginRight: 10,
  },

    InformationsquelleAutor Stone Preston

  3. 0

    versuchen Sie dies :

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

  });
    leider hat das nicht funktioniert
    Antwort aktualisiert wird jetzt versuchen

    InformationsquelleAutor Codesingh

Schreibe einen Kommentar