Jak modelować przycisk z ikonami w trybie natywnego reagowania

Question

Używam pakietu react-native-icons do dołączania ikon z przyciskami. Mają przykładowy kod wymieniony w example folder. Próbuję osiągnąć onPress w widoku, ale okazuje się, że reaguje natywnie nie ma funkcji onPress dla składnika <View>.

Próbowałem używać <TouchableHighlight>, ale może on mieć tylko jeden element podrzędny w nim nie dwa, takie jak <Icon> i <Text> w środku.

Próbowałem też za pomocą <Text> z <Icon> i <Text><Text> wewnątrz, ale może mieć tylko <Text> elementów wewnątrz.

Czy ktoś ma szczęście osiągając podobną funkcjonalność?

<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

Jeśli używasz modułu react-native-icons, można spróbować owinąć zarówno swoją ikonę i tekst w widoku, a następnie użyć TouchableHighlight na wierzchu. Coś jak:

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

Ale będzie to bardzo łatwe, jeśli używasz względną nowy moduł react-native-vector-icons. Możesz to zrobić:

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

Answer 2

udało mi się zrobić to w ten sposób. Zastanawiam się, czy istnieje lepszy sposób.

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>