Question

我刚开始使用react-native所以很抱歉，如果这是一个微不足道的问题。

我正在尝试创建一个包含多个链接的侧边栏。侧边栏工作正常，但问题在于链接本身。以下是链接的jsx。

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

风格：

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,
  }
});

链接包含一个图标（材质样式），后跟标签。 onPress事件已正确注册。但是，点击区域的大小非常小，onPress仅在按下图标而不是标签时触发。我假设TouchableOpacity涵盖了所有嵌套组件？我可以控制TouchableOpacity覆盖的宽度吗？

由于

Answer 1

将您的<TouchableOpacity/>组件包含在具有您在TouchableOpacity上分配的样式的视图中<View style={MenuItemStyles.ItemWrapper}>

并在flex:1组件上添加<TouchableOpacity/>，它将继承<View>的大小

以下是我认为您正在尝试使用上述解决方案完成的工作示例：

https://rnplay.org/apps/SW983Q

TouchOpacity不包括整个菜单链接

1 个答案: