react-native - 如何使用嵌套的 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>

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