TouchOpacity deckt nicht die gesamte Menüverbindung ab

Question

Ich habe gerade angefangen, reactive-native zu verwenden, tut mir leid, wenn es eine triviale Frage ist.

Ich versuche, eine Sidebar mit mehreren Links darin zu erstellen. Die Seitenleiste funktioniert gut, aber das Problem ist mit den Links selbst. Unten ist die Jsx für den Link.

<TouchableOpacity style={MenuItemStyles.ItemWrapper} onPress={this.props.onPress}> 
    <View style={MenuItemStyles.itemIcon}> 
     <Icon 
     name={this.props.iconName} 
     size={this.props.size || 30} 
     color={Colours.LightGrey} 
     /> 
    </View> 
    <Text style={MenuItemStyles.itemLabel}> 
     {this.props.label} 
    </Text> 
    </TouchableOpacity> 

Und der Stil:

const MenuItemStyles = StyleSheet.create({ 
    ItemWrapper: { 
    flexDirection: 'row', 
    alignSelf: 'stretch', 
    marginTop: 10, 
    width: 100, 
    marginBottom: 10 
    }, 
    itemIcon: { 
    alignItems: 'center', 
    alignSelf: 'center', 
    width: 80, 
    }, 
    itemLabel: { 
    color: '#000000', 
    fontSize: 20, 
    fontFamily: 'sans-serif-light', 
    textAlign: 'center', 
    marginLeft: 5, 
    } 
}); 

Der Link enthält ein Symbol (Material-Stil), folgt nach dem Etikett. Das Ereignis onPress ist korrekt registriert. Die Größe des Klickbereichs ist jedoch sehr klein, dh onPress wird nur ausgelöst, wenn auf das Symbol und nicht auf das Etikett gedrückt wird. Ich würde annehmen, TouchableOpacity deckt alle verschachtelten Komponente? Kann ich kontrollieren, wie breit TouchableOpacity Abdeckung?

Dank

Answer 1

Wickeln Sie Ihre <TouchableOpacity/> Komponente in Sicht, die den Stil, den Sie auf TouchableOpacity sind curenttly zuweisen wie dieser <View style={MenuItemStyles.ItemWrapper}>

und durch Zugabe von flex:1 auf der <TouchableOpacity/> Komponente hat, wird es die Größe des <View>

erben

ist ein funktionierendes Beispiel von was ich denke, Sie versuchen, mit der oben implementierten Lösung zu erreichen:

https://rnplay.org/apps/SW983Q