2015-05-26 33 views
6

Sto utilizzando il pacchetto react-native-icons per includere icone con pulsanti. Hanno un codice di esempio elencato in example folder. Sto cercando di ottenere onPress in Visualizza ma risulta che il reagito nativo non ha la funzione onPress per il componente <View>.Come modellare un pulsante con icone in formato nativo reattivo

Ho provato a utilizzare <TouchableHighlight> ma può contenere solo un elemento figlio singolo non uguale a <Icon> e <Text> all'interno.

Ho anche provato usando <Text> con <Icon> e <Text> all'interno ma <Text> può avere solo <Text> elementi interni.

Qualcuno ha avuto fortuna nell'ottenere funzionalità simili?

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> 

risposta

14

Se si utilizza il modulo react-native-icons, si può provare avvolgere sia la vostra icona e testo in una vista, quindi utilizzare TouchableHighlight su di esso. Qualcosa di simile:

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

Ma sarà molto facile se si utilizza un nuovo modulo relativo react-native-vector-icons. Puoi fare come:

<Icon name="facebook" style={styles.icon}> 
    <Text style={styles.text}>Login with Facebook</Text> 
</Icon> 
+2

Io uso TouchableOpacity come questo: ' {}} ' – Dan

4

sono riuscito a fare in questo modo. Mi chiedo se c'è un modo migliore.

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

E 'davvero funzionante per te ??? sembra orribile sulla mia app:/ – msqar

+0

Ehi @msqar, sono passati quasi 2 anni da quando ho provato di nuovo il codice sopra. Puoi pubblicare una modifica se ti piace;) Allora ha funzionato, ora le cose possono essere diverse. –

+0

Sì, sto ancora lottando per farlo sembrare buono T_T perché qualcosa di così semplice è così difficile? hahaha – msqar

Problemi correlati