本文中的內(nèi)容基于react-navigation1.0.0-beta.11和react-native0.42版本實(shí)現(xiàn)交汤。

概述

本文主要講如何實(shí)現(xiàn)兩個(gè)方面的內(nèi)容：

• 在使用react-navigation做導(dǎo)航的應(yīng)用中實(shí)現(xiàn)在登錄頁(yè)和Portal頁(yè)連續(xù)點(diǎn)擊兩次物理返回按鍵退出應(yīng)用的功能可训。
• 實(shí)現(xiàn)物理返回的效果和點(diǎn)擊導(dǎo)航欄左上角的返回按鈕的效果保持一致。物理返回包括Android設(shè)備點(diǎn)擊物理返回按鍵返回以及Android和iOS均支持的手勢(shì)右滑返回嚎研。

了解react-navigation的同學(xué)可能知道，navigation常用的方法一般有三個(gè)肮蛹，navigate用于頁(yè)面跳進(jìn)砖顷，goBack用于頁(yè)面返回，setParams用于向navigation賦屬性或方法巷屿。
一般情況下固以，使用react-navigation做導(dǎo)航的應(yīng)用中的大部分頁(yè)面都會(huì)存在導(dǎo)航欄，也就是navigation中的header嘱巾。我們可以在header中定義返回按鍵憨琳，并在點(diǎn)擊返回按鍵時(shí)執(zhí)行g(shù)oBack方法诫钓，并且大多數(shù)情況下還會(huì)在執(zhí)行g(shù)oBack方法的同時(shí)執(zhí)行必要的返回邏輯。

返回邏輯舉例栽渴，比如：

• 根據(jù)當(dāng)前頁(yè)面的某些參數(shù)來(lái)決定要不要返回尖坤。
• 返回前調(diào)用上個(gè)頁(yè)面?zhèn)鬟f進(jìn)來(lái)的回調(diào)方法稳懒。
• 更復(fù)雜一點(diǎn)的闲擦，在調(diào)用上個(gè)頁(yè)面?zhèn)鬟f進(jìn)來(lái)的回調(diào)方法時(shí)，傳遞一些參數(shù)回去场梆，例如在子頁(yè)面中通過(guò)請(qǐng)求獲取了一些數(shù)據(jù)墅冷，在返回時(shí)需要刷新上一頁(yè)的頁(yè)面內(nèi)容。

核心原理

在react-navigation中有一個(gè)用于監(jiān)聽(tīng)navigation變化的方法或油，叫做onNavigationStateChange寞忿。要實(shí)現(xiàn)上面提到的效果，都要圍繞著這個(gè)監(jiān)聽(tīng)方法來(lái)解決顶岸。首先來(lái)看一下這個(gè)方法的定義腔彰。

./react-navigation/src/createNavigationContainer.js
/.../
_onNavigationStateChange(
  prevNav: NavigationState,
  nav: NavigationState,
  action: NavigationAction
) {
  if (
    typeof this.props.onNavigationStateChange === 'undefined' &&
    this._isStateful()
  ) {
    /* eslint-disable no-console */
    if (console.group) {
      console.group('Navigation Dispatch: ');
      console.log('Action: ', action);
      console.log('New State: ', nav);
      console.log('Last State: ', prevNav);
      console.groupEnd();
    } else {
      console.log('Navigation Dispatch: ', {
        action,
        newState: nav,
        lastState: prevNav,
      });
    }
    /* eslint-enable no-console */
    return;
  }

  if (typeof this.props.onNavigationStateChange === 'function') {
    this.props.onNavigationStateChange(prevNav, nav, action);
  }
}
/.../

這個(gè)方法會(huì)接收到三個(gè)參數(shù)，分別是navigation發(fā)生變化之前的路由狀態(tài)prevNav辖佣，navigation發(fā)生變化之后的路由狀態(tài)nav以及發(fā)生的操作action霹抛。有了這三個(gè)參數(shù)，足夠我們判斷出每一次navigation發(fā)生變化時(shí)的前后狀態(tài)以及發(fā)生了什么變化卷谈。

從NavigationActions的源碼中可以得出杯拐，actions一共定義了六種操作。

實(shí)現(xiàn)方式

基于這個(gè)方法世蔗，我們?cè)趹?yīng)用最開(kāi)始的StackNavigator上使用這個(gè)方法做監(jiān)聽(tīng)端逼，可以監(jiān)聽(tīng)到應(yīng)用中所有頁(yè)面發(fā)生的跳轉(zhuǎn)。然后我們來(lái)實(shí)現(xiàn)最開(kāi)始提到的兩個(gè)需求污淋。

index.js
/.../
constructor(props) {
    super(props);
    this.state = {
        firstTime: 0, //記錄點(diǎn)擊Android物理返回按鍵的時(shí)間
        prevNav: null, //記錄navigation發(fā)生變化之前的頁(yè)面路由狀態(tài)
        nav: null, //記錄navigation發(fā)生變化之后的頁(yè)面路由狀態(tài)
        action: null, //記錄發(fā)生的操作
        setParams: [], //記錄在跳進(jìn)過(guò)程中顶滩，發(fā)生setParams操作的頁(yè)面的action信息
    };
}

componentDidMount() {
    if(Platform.OS == 'android') {
        BackAndroid.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
    }
}

componentWillUnMount() {
    if(Platform.OS == 'android') {
        BackAndroid.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
    }
}

onBackButtonPressAndroid = () => {
    //進(jìn)入引導(dǎo)頁(yè) or 進(jìn)入登錄頁(yè) or 進(jìn)入Portal頁(yè) or 退回登錄頁(yè) or 退回Portal頁(yè)
    if((this.state.action.type == 'Navigation/NAVIGATE' && this.state.action.routeName == 'guide') ||
        (this.state.action.type == 'Navigation/NAVIGATE' && this.state.action.routeName == 'Login') ||
        (this.state.action.type == 'Navigation/NAVIGATE' && this.state.action.routeName == 'portal') ||
        (this.state.action.type == 'Navigation/RESET') ||
        (this.state.action.type == 'Navigation/BACK' && this.state.nav.index == 2)) {
        if(new Date().getTime() - this.state.firstTime > 2 * 1000) {
            this.state.firstTime = new Date().getTime();
            ToastAndroid.show('再按一次退出應(yīng)用', ToastAndroid.SHORT, ToastAndroid.BOTTOM);
            return true;
        } else {
            BackAndroid.exitApp();
        }
    }
    return false;
}

onNavigationStateChange(prevNav, nav, action) {
    if(action.type == 'Navigation/BACK') {
        this.state.setParams[prevNav.index] && this.state.setParams[prevNav.index].params && this.state.setParams[prevNav.index].params.navigateBackPress && this.state.setParams[prevNav.index].params.navigateBackPress(true);
    }
    if(action.type == 'Navigation/SET_PARAMS') {
        this.state.setParams[nav.index] = action;
    }
    this.state.prevNav = prevNav;
    this.state.nav = nav;
    this.state.action = action;
}
render() {
    return (<MainPage onNavigationStateChange={this.onNavigationStateChange.bind(this)}></MainPage>);
}
/.../

這段代碼可以定義在應(yīng)用的入口頁(yè)面中。
onBackButtonPressAndroid是Android設(shè)備點(diǎn)擊物理返回按鍵時(shí)觸發(fā)的方法寸爆。在這個(gè)方法中拿引導(dǎo)頁(yè)礁鲁、登錄頁(yè)和Portal舉例歌憨，分別列舉了進(jìn)入和退回這三個(gè)頁(yè)面時(shí)的情況务嫡。不管是進(jìn)入這些頁(yè)面還是退回到這些頁(yè)面挫剑，當(dāng)再次點(diǎn)擊Android物理返回按鍵時(shí)哲戚，都應(yīng)該直接提示"再按一次退出應(yīng)用"脆炎，這樣就實(shí)現(xiàn)了我們的第一個(gè)需求簇爆。
onBackButtonPressAndroid方法返回true和false的含義是不同的哨毁，return true代表不執(zhí)行返回上一頁(yè)的動(dòng)作，物理按鍵返回上一頁(yè)的動(dòng)作被截住。return false則執(zhí)行返回上一頁(yè)吉嫩。

第二個(gè)需求實(shí)現(xiàn)的關(guān)鍵點(diǎn)在onNavigationStateChange方法中的兩個(gè)if的使用。
先拿一個(gè)普通的帶導(dǎo)航欄的頁(yè)面做說(shuō)明。

commonPage.js
/.../
export default class CommonScanResult extends Component {
    static navigationOptions = ({
        navigation,
        screenProps
    }) => ({
        headerTitle: '普通頁(yè)面',
        headerLeft: (
            <View style={styles.navBarRightButton}>
                <TouchableOpacity style={styles.navBarRightButton_left} onPress={() => navigation.state.params.navigateBackPress(false)}>
                    <Image source={{ uri: GLOBAL.WebRoot + 'web/img/customer/back@2x.png' }} style={styles.backImage} />
                    <Text style={{ fontSize: 16, color: 'white', fontFamily: 'PingFangSC-Light' }}>返回</Text>
                </TouchableOpacity>
            </View>
        ),
    });
    constructor(props) {
        super(props);
        this.state = {
        
        }
    }
    componentWillMount() {
    
    }
    componentDidMount() {
        this.props.navigation.setParams({ navigateBackPress: this.navigateBackPress });
    }
    navigateBackPress = (isDeviceReturnKey) => {
        this.props.navigation.state.params.onBack && this.props.navigation.state.params.onBack();
        if(!isDeviceReturnKey) {
            this.props.navigation.goBack();
        }
    }
    render() {
        return (
            <View style={{ backgroundColor: '#f7f7f7', flex: 1, alignItems: 'center' }}>
            </View>
        );
    }
}
/.../

commonPage就是一個(gè)帶導(dǎo)航欄的最普通的頁(yè)面，導(dǎo)航欄左側(cè)是返回按鈕。在componentDidMount中我們使用setParams為返回按鈕定義了要執(zhí)行的返回邏輯，除了需要調(diào)用goBack方法外還需要調(diào)用上個(gè)頁(yè)面?zhèn)鱽?lái)的回調(diào)方法onBack定续。如果我們的返回方式是直接點(diǎn)擊了導(dǎo)航欄左側(cè)的返回按鈕供嚎，那么onBack和goBack都需要執(zhí)行氮凝。但是當(dāng)我們通過(guò)點(diǎn)擊Android物理返回按鍵或者是手勢(shì)右滑返回上一頁(yè)，則goBack方法就不需要執(zhí)行了，只需要執(zhí)行返回時(shí)需要執(zhí)行的其他邏輯就好。所以我們對(duì)navigateBackPress做了一些改進(jìn)浆劲，讓它接收一個(gè)參數(shù)isDeviceReturnKey，代表這次返回是不是通過(guò)物理返回實(shí)現(xiàn)的。當(dāng)isDeviceReturnKey=true時(shí)汪诉，代表是物理返回迄本。當(dāng)isDeviceReturnKey=false時(shí)，代表是導(dǎo)航欄返回。那么現(xiàn)在的問(wèn)題就是我們能在commonPage中調(diào)用到navigateBackPress并傳false參數(shù)，那么怎么在index.js中調(diào)用到這個(gè)方法呢啤覆？

從剛才提到的那兩個(gè)if邏輯中可以看出，action參數(shù)中存儲(chǔ)了進(jìn)入commonPage時(shí)的params见剩，那在componentDidMount中執(zhí)行的setParams也自然就把navigateBackPress存到了params中杀糯。所以在進(jìn)入commonPage時(shí)將action存下來(lái)固翰，等到要離開(kāi)這個(gè)頁(yè)面時(shí)在調(diào)用其中的回調(diào)方法執(zhí)行返回時(shí)的邏輯就可以了。這種方式要求我們必須把頁(yè)面的返回方法名稱(chēng)定義為navigateBackPress或者其他固定的名字。prevNav.index和nav.index分別是發(fā)生跳轉(zhuǎn)前的頁(yè)面路由層次和發(fā)生跳轉(zhuǎn)后的頁(yè)面路由層次降允。

setParams之所以被定義為數(shù)組，是因?yàn)轫?yè)面發(fā)生的跳轉(zhuǎn)有可能是連續(xù)的管嬉，比如連續(xù)的跳進(jìn)再連續(xù)的跳出皂林，所以我們需要將每一層的navigateBackPress都記下來(lái)，在哪一層返回就調(diào)用哪一層的navigateBackPress方法求厕。

總結(jié)

通過(guò)以上方式著隆，利用關(guān)鍵的兩個(gè)方法onBackButtonPressAndroid和onNavigationStateChange扰楼，應(yīng)用就可以實(shí)現(xiàn)在登錄頁(yè)和Portal頁(yè)點(diǎn)擊Android物理返回按鍵提示退出應(yīng)用的效果，可以實(shí)現(xiàn)在某個(gè)頁(yè)面通過(guò)物理返回方式返回上一頁(yè)時(shí)的效果與點(diǎn)擊導(dǎo)航欄左側(cè)返回按鈕的效果保持一致美浦。