美文网首页
使用React Navigation的stack 监听返回

使用React Navigation的stack 监听返回

作者: vivianXIa | 来源:发表于2020-08-30 18:50 被阅读0次

    如果是点击自定义的返回写监听的话,可以写一个事件。这里的话,是stack自动生成的header,右边的返回图标。点击返回的话,返回的页面怎么监听。

    找了资料不怎么多,但是官网有写。
    思路就是:
    1:引用react-navigation的生命周期useFocusEffect (新版的react是没有生命周期,但是navigation还是有生命周期的)
    2:封装1个监听组建,写进render中
    3:useFocusEffect 监听到页面focus的时候,执行更新回调函数,这个函数里可以写要更新的数据内容。

    import { useFocusEffect } from '@react-navigation/native';
    //监听页面返回 刷新数据
    const PageListen = ({onUpdate })=> {
      useFocusEffect(
        React.useCallback(() => {
          onUpdate();
          return () => {
            // Do something when the screen is unfocused
          };
        }, [onUpdate])
      );
    
      return null;
    }
    
    //useFocusEffect 监听到变化回调该方法
    
    _onUpdate(){
    //返回到这个页面可以局部更新内容写在这里
    }
    render () {
        return (
          <View>
            <PageListen  userId={this.props.userId} onUpdate={this._onUpdate}/>
         </View>
    )
    }

    相关文章

      网友评论

          本文标题:使用React Navigation的stack 监听返回

          本文链接:https://www.haomeiwen.com/subject/kevesktx.html