React Native Touch事件问题

Question

我面临触摸事件的问题。我在一个项目中添加了两个根视图。第二个根视图使用一个新的reactinstanceManager，它嵌套在第一个根视图中。当我点击第二个rootview的touchable时，可以看到这个问题，它会触发该touchable的事件，也会触发第一个react rootview中的一些随机touchable的事件。我试着调试这个，发现在检查flipper上的布局时，一些视图组组件在rootview1和rootview2中具有相同的id，不确定这是否是问题。

任何帮助都将不胜感激。

Answer 1

只需将道具onStartShouldSetResponder={event => true}添加到您想要防止冒泡的<View>中，并在您希望传播停止的位置使用e.stopPropagation()到内部视图。例如

<TouchableOpacity onPress={this.doSomething1}>
<View
onStartShouldSetResponder={(event) => true}
onTouchEnd={(e) => {
e.stopPropagation();
}}
>
<TouchableOpacity onPress={this.doSomething2}>
<Image ... />
</TouchableOpacity>
</View>
</TouchableOpacity>

你应该看看手势响应器的方法:https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle .

Answer 2

将此添加到您的Touchables

onTouchEnd={(e) => {
e.stopPropagation()
}}

或/并尝试在onPress函数的开始添加e.stopPropagation();，如:

onPress={(e) => {
e.stopPropagation();
}}