React Native回应儿童媒体事件

qni6mghb  于 2022-12-04  发布在  React
关注(0)|答案(1)|浏览(123)

我正在寻找一个解决方案,它允许我从父组件响应所有子组件的新闻事件(包括嵌套在其他组件中的查尔兹)。特别是,我对新闻发布事件(如TouchableOpacity的onPressOut等)感兴趣。
我不想打断子组件对该事件的响应,我只想进一步响应该事件以执行其他任务。因此,我不能在父组件上使用捕获阶段,因为它将停止在链中进一步传播事件。
我也不想手动为父对象的每个子对象添加按下响应功能,因为这样会有很多查尔兹,而且这会成为一项乏味的任务,尤其是在重构或重新实现时。
在Bubbling事件阶段,父TouchableOpacity组件允许我在没有子组件响应的情况下捕获所有press事件。但是,如果子组件响应了这些事件,则事件不会在链中进一步向上传播,因此,它永远不会到达父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中发出它的东西,但我无法找到任何解决方案。

cwxwcias

cwxwcias1#

您可以定义一个函数,当按下父级时调用该函数,当按下子级时调用同一个函数。

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

相关问题