如何使用嵌套TouchableOpacity？

Question

我有以下组件

<TouchableOpacity onPress={() => { console.log("Hello World }}>
  <Text>Hello World</Text>
</TouchableOpacity>

然后，我想将此组件包装在HoC中，后者将WrappedComponent包装在TouchableOpacity中。

const withFoo = WrappedComponent => class extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => { console.log("Hello HoC") }}>
        <WrappedComponent {...this.props} />
      </TouchableOpacity>
    )
  }
}

但是，当我单击该组件时，我只看到"Hello World“。我没有看到来自HoC的任何输出。

Answer 1

我们可以在代码中使用TouchableOpacity。但是，如果子组件的大小与主组件的大小相同，则不会得到主组件的任何结果。

<TouchableOpacity 
style={{width:50, height:50, backgroundColor:'red}} 
onPress={() => { console.log("Hello World }}>
  <Text>Hello World</Text>
</TouchableOpacity>

尝试更新子组件的样式，并检查两个子组件的单击方法。