react-native-scrollable-tab-view tab对应content页面的数据请求的说明

react-native-scrollable-tab-view是一个用了做顶部tab切换的一个组件它自带一个onChangeTab事件在切换tab的时候触发回调

在回调里面我们可以调用当前高亮tab对应content组件的发起数据请求的函数

现在遇到一个需求,页面切换的时候(从其他页面进入当前包含react-native-scrollable-tab-view组件的页面和回退进入react-native-scrollable-tab-view页面的时候都需要刷新当前高亮tab页面的数据)
我们的项目用到了react-navigation第三方组件,它提供了页面获取焦点的事件监听,代码使用如下:

 componentDidMount() {
    action(this.props.navigation);
    console.log("回退我还会执行??")
    //详情页回退时候刷新对应的tab下的列表
    this.didFocusSubscription = this.props.navigation.addListener(
      'didFocus',
      payload => {
        console.log("回退刷新&&切换app黑屏和亮屏时候刷新&&初始进入时候刷新")
        this.reloadList();//刷新当前高亮的tab对应的函数
      },
    );
  }
  componentWillUnmount() {
    this.didFocusSubscription.remove();
  }

这个代码应该写在当前主页面,而不是每个tab对应的content组件都写一遍

目前遇到一个坑点就是把当前的navigation当做props传给每个tab对应的content,并且把上面那个代码复制一遍
这不仅仅导致代码重复,而且主页面获取焦点的时候,会导致每个tab对应content组件下面的事件监听都会执行一遍

正确姿势:每个tab的content组件都写好刷新数据的接口(函数),在主页面写获取焦点的事件监听,在this.reloadList()里面触发当前tab对应content组件下东西刷新数据的函数
 

你可能感兴趣的:(reactnative)