React Native 响应儿童新闻事件

Question

我正在寻找一种解决方案，允许我从父组件响应所有子组件的新闻事件(包括嵌套在其他组件中的子组件(。特别是，我对新闻稿活动感兴趣(例如 onPressOut for TouchableOpacity 等(。

我不想打断孩子对那个事件的反应，我只想对那个事件做出进一步的反应来执行其他任务。因此，我不能在父组件上使用捕获阶段，因为它将停止在链中进一步传播事件。

我也不想手动为父级的每个子级添加新闻响应功能，因为会有很多子级，并且会变得繁琐，尤其是在重构或重新实现中。

父 TouchableOpacity 组件允许我在冒泡事件阶段捕获所有新闻事件，当没有孩子响应它们时。但是，如果孩子对它们做出响应，该事件不会在链中进一步传播，因此，它永远不会到达父级 TouchableOpacity。

在代码中：

<TouchableOpacity onPressOut={ this.doSomethingInParentWhenAChildIsPressed >
<TouchableOpacity onPressOut={()=>{
/* doing something in child, parent should react in addition to this */
} />
<View>
<TouchableOpacity onPressOut={()=>{
/* doing something in nested child, parent should react in addition to this */
} />
</View>
<View>
<Text>When this text is pressed, the parent TouchableOpacity responds</Text>
<View>
<TouchableOpacity onPressOut={()=>{
/* doing something in other nested child, parent should react in addition to this */
} />
</View>
<View>
<Text>The parent TouchableOpacity also responds on this text being pressed</Text>
</View>
</View>
</TouchableOpacity>

你知道有什么方法可以做到这一点吗？

是否可以以某种方式从父级捕获触摸开始事件，同时仍然允许事件在链中进一步传播？我一直在寻找任何允许我创建合成事件并在 React Native 中发出它的东西，但我找不到任何解决方案。

Answer 1

您可以定义一个函数，该函数将在按下父级时调用，并在按下子级时调用相同的函数。

class App extends React.Component {
onPress = () => {
console.log('Parent Pressed');
};
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onPress}>
<View style={styles.button}>
<Text>Parent</Text>
<TouchableHighlight onPress={() => {
console.log('Child Pressed')
this.onPress()
}} style={styles.child}>
<Text>Child</Text>
</TouchableHighlight>
</View>
</TouchableHighlight>
</View>
);
}
}

查看此堆栈示例：https://snack.expo.io/@ashwith00/4ddff3