Question

我有一些看起来像这样的项目：

我想要实现的目标：

当用户按下Feed中的项目（由黑匣子表示）时，它们将被带到该项目的单独页面。当用户点击星形图标时，他们可以“喜欢”该项目。

我是如何尝试的：

我目前正在尝试通过嵌套两个TouchableOpacity（由黑框表示）来实现此功能，其中内部/子项TouchableOpacity应用了zIndex: 2样式。

zIndex样式似乎没有优先考虑触摸事件的子容器，所以我想知道是否有人知道如何实现这种模式。我想我可能需要使用PanResponder，但这似乎是一种非常冗长的方式来添加此功能。

任何评论或示例都将不胜感激！感谢。

Answer 1

为什么不像下面这样：

<View style={{flex-direction: "row"}}>
   <View>
      <TouchableOpacity onPress={this.goToDetails.bind(this)}>
      </TouchableOpacity>
   </View>
   <View>
      <TouchableOpacity onPress={this.goToDetails.bind(this)}>
      </TouchableOpacity>
      <TouchableOpacity onPress={this.favoriteItem.bind(this)}>
      </TouchableOpacity>
   </View>
</View>

如果连续有两个视图，则第一个视图有一个TouchableOpacity，第二个视图在一列中有两个TouchableOpacity（其中第一个视图与之前的TouchableOpacity相似，第二个是喜欢这个项目。）

应该是这样的结构：

Answer 2

您是否可以简单地在父TouchableOpacity中嵌套TouchableOpacity？我做了一个模拟项目，下面似乎有效

<View>
    <TouchableOpacity 
      style = {{backgroundColor: 'red', height: 100}}
      onPress = {() => {console.log("PARENT METHOD")}}>
          //content
          <TouchableOpacity 
               style = {{width: 30, height: 30, backgroundColor: 'yellow',
                                      position: 'absolute', right: 5, bottom: 5}}
               onPress = {() => {console.log("CHILD METHOD")}}>
              //content
          </TouchableOpacity>
      </TouchableOpacity>
</View>

我已经使用了日志，当按下小的嵌套框时，只记录子方法，类似地，如果我按下父视图。

日志输出：显示独立触摸

如果有帮助，请告诉我

如何在React Native中“堆叠”触摸事件

2 个答案: