美文网首页
使用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