menu
refresh
shufu
这是一个前端开发记录Debug过程和杂谈的博客
使用addListener监听react-navigation切换路由失效和聚焦处理事件
access_time
brush 160个字
whatshot 156 ℃

RN使用 react-navigation 创建路由导航时(createTopNavigator、createBottomNavigator、createDrawerNavigator)等时,react-native的生命周期只会在第一次创建时调用 componentDidMount、componentWillMount钩子,当跳转到另一个页面,点击返回键再次返回到此页面时不会再次调用,但我们往往需要在返回此页面后重新执行获取数据等方法函数。

解决方法:

使用addListener来处理

componentDidMount() {
    this.eventListener = this.props.navigation.addListener('didFocus', () => {
      //...事件处理
      //didFocus获取焦点时候响应
    });
  }

  componentWillUnmount() {
this.eventListener.remove();
  }Ï

didFocus是指当前页面第一次加载的时候会调用一次


didBlur是指当前页面离开的时候会调用一次(前提是当前页面没有被销毁既没有执行componentWillUnmount()函数)


#如无特别声明,该文章均为 shufu 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2019 年 11 月 18 日


account_circle
email
explore


DreamCat

主题名称:DreamCat | 版本:X1.6-20201226

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld

鸣谢:学神之女

鸣谢:学神之女