【React native】 切换导航刷新页面

业务需要增加离线文件列表模块，视频下载完成自动刷新主导航页面列表

 实现思路：

• 传输service组件内实现，传输完成一个任务时发送事件通知页面刷新（大量任务下载时频繁刷新消耗性能，暂时不用）
• 主导航使用TabNavigator组建创建，通过切换tab时，切换到需要刷新页面时主动刷新
• 查看官方文档，找到Tab点击操作事件

tabBarOnPress

tab被点击时的回调函数；参数是一个对象，包含一下属性：

• previousScene: { route, index } ：正在离开的页面
• scene: { route, index } 被点击的页面
• jumpToIndex 执行跳转操作必须的参数

在跳转到下一个页面之前增加一个自定义的逻辑是有用的

• 待刷新页面注册监听接受刷新通知 

 OfflineFiles: {
            screen: OfflineFiles,
            path: '/offline',
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '离线文件',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../images/tab/cloud_light.png') : require('../images/tab/cloud_normal.png')}/>
                ),
                tabBarOnPress: (obj) => { // 使用tabBarOnPress点击事件
                    console.log('tabBarOnPress ',obj,navigation);
                    if (!obj.scene.focused) {
                        // 路由方法, 动态跳转到对应界面
                        navigation.navigate(navigation.state.routeName)
                        //通知，刷新页面数据
                        DeviceEventEmitter.emit("tab_refresh_page", {update:true});
                    }
                },
            })
        },

• 收到刷新通知，执行刷新列表操作 

•      componentWillMount(){
          BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
          this.listener =         
          DeviceEventEmitter.addListener('tab_refresh_page',function(data){
              //  自定义页面刷新动作
             
              });
      }
  
      componentWillUnmount() {
          BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
          this.listener.remove();
      }