web-dev-qa-db-fra.com

Comment modéliser un bouton avec des icônes en React-Native

J'utilise react-native-icons package pour inclure des icônes avec des boutons. Ils ont un exemple de code répertorié dans exemple de dossier . J'essaie d'obtenir onPress sur View mais il s'avère que react-native n'a pas de fonction onPress pour <View> composant.

J'ai essayé d'utiliser <TouchableHighlight> mais il ne peut contenir qu'un seul élément enfant, pas deux comme <Icon> et <Text> à l'intérieur.

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

Quelqu'un a-t-il eu de la chance d'obtenir des fonctionnalités similaires?

Sample Buttons with Icons

<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>
javascriptiosreactjsreact-native
15
Piyush Chauhan

Si vous utilisez le module react-native-icons , vous pouvez essayer d'habiller à la fois votre icône et votre texte dans une vue, puis utilisez TouchableHighlight par-dessus. Quelque chose comme:

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

Mais ce sera très facile si vous utilisez un nouveau module relatif react-native-vector-icons . Vous pouvez faire comme:

<Icon name="facebook" style={styles.icon}>
   <Text style={styles.text}>Login with Facebook</Text>
</Icon>
29
Sean Zhao

J'ai réussi à le faire comme ça. Je me demande s'il y a 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>
8
Piyush Chauhan