React-navigation的回调跳转

源码在此：传送门

---

Android中界面跳转传值我们用到了Bundle或者接口回调的方式，而React Native中界面跳转是什么样的呢？这篇博客就详细讲讲react-navigation跳转回调的实现方式

---

先看一下案例图：

需要准备

案例中运用到的React Native依赖库有：
react-navigation 和react-native-video
安装和使用步骤可以参考我的这两篇博客：
react-navigation使用攻略、react-native-video使用攻略

案例分析

首先详细分析下上面gif图的需求：在视频界面需要监听播放进度，到达20%进度的时候弹出提示框，如下：

视频界面（以下简称：页面1）中点击分享后跳转至分享界面（以下简称：页面2），分享界面中按物理键Back或者点击回退箭头可以会退到页面1，页面1就可以继续播放了。

实现思路

首先页面1跳转页面2后，要设置对页面2的监听，页面2跳转回页面1，也就是goBack时候返回参数，这个要用到回调跳转的思路实现

实现方法

步骤一：
在页面1中创建一个方法：

returnTag: (tag) => {
      this.setState({tag: tag});
}

步骤二：
跳转页面的时候将该方法作为参数，传递给页面2：

this.props.navigation.navigate('Share', {
      returnTag: (tag) => {
      this.setState({tag: tag});
      }
});

步骤三：
在页面2中goBack方法中创建如下功能：

this.props.navigation.state.params.returnTag(2);
this.props.navigation.goBack();

这样页面1就能拿到页面2所传过来的值，然后作为一个标签tag决定视频是否继续播放！

关键的代码如下：
页面1：

 if (data.currentTime > this.state.duration * 0.2 && this.state.tag !== 2) {
            this.setState({paused: !this.state.paused});
            Alert.alert('您需要分享App才能继续观看视频哦', '请选择', [
                {
                    text: '取消', onPress: () => {
                        this.props.navigation.goBack();
                        this.setState({
                            paused: this.state.paused
                        })
                    }
                },
                {
                    text: '分享', onPress: () => {
                        this.props.navigation.navigate('Share', {
                            returnTag: (tag) => {
                                this.setState({tag: tag});
                            }
                        });
                    }
                },
            ]);
        }

这段代码是执行在Video的回调函数中，视频播放过程中每个间隔进度单位（通常不足一秒，你可以打印日志测试下）调用的回调。

页面2：

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
}

onBackAndroid = () => {
    const {navigate, goBack, state} = this.props.navigation;
    state.params.returnTag(2);
    goBack();
    // this.props.navigation.state.params.returnTag(2);
    // this.props.navigation.goBack();
    return true;
};

补充

跳转页面时，可以传值跳转和正常跳转（也就是不携带任何参数）
传值跳转:

this.props.navigation.navigate('Two', {data:this.state.data});

正常跳转

this.props.navigation.navigate('Two');

可以参考这篇博客