Comment modéliser un bouton avec des icônes de réagir indigènes

Je suis en utilisant réagir-native-icônes paquet incluent des icônes avec des boutons. Ils ont un exemple de code figurant dans exemple de dossier. Je suis en train de réaliser onPress sur la Vue, mais s'avère réagir indigènes n'ont pas onPress fonction pour <View> composant.

J'ai essayé d'utiliser <TouchableHighlight> mais elle ne peut avoir d'enfant unique élément en elle, et non pas deux comme <Icon> et <Text> à l'intérieur.

J'ai aussi essayé d'utiliser <Text> avec <Icon> et <Text> à l'intérieur, mais <Text> ne peut avoir <Text> éléments à l'intérieur.

Quelqu'un at-il avoir un peu de chance, la réalisation d'une fonctionnalité similaire ?

Comment modéliser un bouton avec des icônes de réagir indigènes

<View onPress={this.onBooking} 
  style={styles.button}>
  <Icon
    name='fontawesome|facebook-square'
    size={25}
    color='#3b5998'
    style={{height:25,width:25}}/>
  <Text style={styles.buttonText}>Sign In with Facebook</Text>
</View>
InformationsquelleAutor Piyush Chauhan | 2015-05-26
  1. 28

    Si vous utilisez réagir-native-icônes module, vous pouvez essayer d'envelopper à la fois votre icône et le texte dans une vue, puis utilisez TouchableHighlight sur le dessus de cela. Quelque chose comme:

    <TouchableHighlight onPress={()=>{}}>
     <View>
         <Icon ... />
         <Text ... />
     </View>
 </TouchableHighlight>

    Mais il sera très facile si vous utilisez un relativement nouveau module réagir-native-vecteur icônes. Vous pouvez faire comme:

    <Icon name="facebook" style={styles.icon}>
   <Text style={styles.text}>Login with Facebook</Text>
</Icon>
    • J'utilise TouchableOpacity comme ceci: <TouchableOpacity style={} onPress={()=>{}} <Icon ... /> <Text ... /> </TouchableOpacity>
    InformationsquelleAutor Sean Zhao
  2. 7

    J'ai réussi à le faire de cette façon. Je me demande si il ya une meilleure façon.

    var styles = StyleSheet.create({
  btnClickContain: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    alignSelf: 'stretch',
    backgroundColor: '#009D6E',
    borderRadius: 5,
    padding: 5,
    marginTop: 5,
    marginBottom: 5,
  },
  btnContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    alignSelf: 'stretch',
    borderRadius: 10,
  },
  btnIcon: {
    height: 25,
    width: 25,
  },
  btnText: {
    fontSize: 18,
    color: '#FAFAFA',
    marginLeft: 10,
    marginTop: 2,
  }
});

<TouchableHighlight
  onPress={this.onBooking} style={styles.btnClickContain}
  underlayColor='#042417'>
  <View
    style={styles.btnContainer}>
    <Icon
      name='fontawesome|facebook-square'
      size={25}
      color='#042'
      style={styles.btnIcon}/>
    <Text style={styles.btnText}>Sign In with Facebook</Text>
  </View>
</TouchableHighlight>
    • Est-ce réellement travailler pour vous??? il semble horrible sur mon app :/
    • Hey @msqar, cela fait presque 2 ans que j'avais essayé de nouveau le code ci-dessus. Vous pouvez modifier si vous le souhaitez 😉 vers l'Arrière, puis il a travaillé, maintenant, les choses peuvent être différentes.
    • Oui, je suis encore de la difficulté à faire un bon T_T pourquoi quelque chose d'aussi simple est devient dur? hahaha
    InformationsquelleAutor Piyush Chauhan