原始碼在此：傳送門

Android中介面跳轉傳值我們用到了Bundle或者介面回撥的方式，而React Native中介面跳轉是什麼樣的呢？這篇部落格就詳細講講react-navigation跳轉回調的實現方式

先看一下案例圖：

需要準備

案例中運用到的React Native依賴庫有：
react-navigation 和react-native-video
安裝和使用步驟可以參考我的這兩篇部落格：
react-navigation使用攻略、react-native-video使用攻略

案例分析

首先詳細分析下上面gif圖的需求：在視訊介面需要監聽播放進度，到達20%進度的時候彈出提示框，如下：

實現思路

首先頁面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');

可以參考這篇部落格