So modellieren Sie eine Schaltfläche mit Symbolen in reaktiven nativen

Question

Ich verwende react-native-icons Paket, um Symbole mit Schaltflächen zu enthalten. Sie haben einen Beispielcode in example folder aufgelistet. Ich versuche onPress on View zu erreichen, stellt sich aber heraus, reagiert nicht native onPress Funktion für <View> Komponente.

Ich versuchte mit <TouchableHighlight>, aber es kann nur einzelne Kindelement in es nicht zwei wie <Icon> und <Text> innerhalb haben.

Ich habe auch versucht <Text> mit <Icon> und <Text> innen aber <Text> mit nur innerhalb <Text> Elemente aufweisen kann.

Hat jemand Glück, ähnliche Funktionen zu erreichen?

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

Answer 1

Wenn Sie react-native-icons Modul verwenden, können Sie versuchen, sowohl Ihr Symbol und Text in einer Ansicht wickeln, dann verwenden TouchableHighlight oben drauf. Etwas wie:

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

Aber es wird sehr einfach, wenn Sie ein relativ neues Modul react-native-vector-icons verwenden. Sie können folgendes tun:

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

Answer 2

schaffte ich es, wie dies zu tun. Ich frage mich, ob es einen besseren Weg gibt.

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>