隨著React Navigation逐漸穩(wěn)定，Navigator也被光榮的退休了。在React Native生態(tài)環(huán)境中需要一款可擴(kuò)展且易于使用的導(dǎo)航組件，Navigator 自然勝任不了，這時React Native社區(qū)便孕育出了一個開源導(dǎo)航組件React Navigation。

React Navigation的出現(xiàn)替代了Navigator、 Ex-Navigation等老一代的導(dǎo)航組件，React Navigation可以說是Navigator的加強(qiáng)版，不僅有Navigator的全部功能，另外還支持底部導(dǎo)航類似于與iOS中的UITabBarController，此外它也支持側(cè)拉效果方式的導(dǎo)航類似于Android中的抽屜效果。

這篇文章將向大家分享React Navigation3x開發(fā)的一些實用技巧，以及從navigator到React Navigation的一些實戰(zhàn)經(jīng)驗。

提示：和本文配套的還有一個React Navigation3x的視頻教程，歡迎學(xué)習(xí)。

什么是導(dǎo)航器？

導(dǎo)航器也可以看成一個是普通的React組件，你可以通過導(dǎo)航器來定義你的App的導(dǎo)航結(jié)構(gòu)。 導(dǎo)航器還可以渲染通用元素，例如可以配置的標(biāo)題欄和選項卡欄。

在React Navigation中有以下7種類型的導(dǎo)航器：

• createStackNavigator: 類似于普通的Navigator，屏幕上方導(dǎo)航欄；
• createTabNavigator: createTabNavigator已棄用，使用createBottomTabNavigator和/或createMaterialTopTabNavigator替代；
• createBottomTabNavigator：相當(dāng)于iOS里面的TabBarController，屏幕下方的標(biāo)簽欄；
• createMaterialTopTabNavigator：屏幕頂部的材料設(shè)計主題標(biāo)簽欄；
• createDrawerNavigator: 抽屜效果，側(cè)邊滑出；
• createSwitchNavigator：SwitchNavigator 的用途是一次只顯示一個頁面。

你可以通過以上7種導(dǎo)航器來創(chuàng)建你APP，可以是其中一個也可以多個組合，這個可以根據(jù)具體的應(yīng)用場景并結(jié)合每一個導(dǎo)航器的特性進(jìn)行選擇。

在開始學(xué)習(xí)7種導(dǎo)航器之前，我們需要先了解兩個和導(dǎo)航關(guān)于概念：

• Screen navigation prop(屏幕導(dǎo)航屬性)：通過navigation可以完成屏幕之間的調(diào)度操作，例如打開另一個屏幕；
• Screen navigationOptions(屏幕導(dǎo)航選項)： 通過navigationOptions可以定制導(dǎo)航器顯示屏幕的方式（例如：頭部標(biāo)題，選項卡標(biāo)簽等）；

導(dǎo)航器所支持的Props

const SomeNav = createStackNavigator/createBottomTabNavigator/createMaterialTopTabNavigator/createDrawerNavigator/createSwitchNavigator({
  // config
});

<SomeNav
  screenProps={xxx}
  ref={nav => { navigation = nav; }}
  onNavigationStateChange=(prevState, newState, action)=>{

  }
/>

• ref：可以通過ref屬性獲取到navigation；
• onNavigationStateChange(prevState, newState, action)：頂級節(jié)點除了ref屬性之外，還接受onNavigationStateChange(prevState, newState, action)屬性，每次當(dāng)導(dǎo)航器所管理的state發(fā)生改變時，都會回調(diào)該方法；
  • prevState：變化之前的state；
  • newState：新的state；
  • 導(dǎo)致state變化的action；
• screenProps：向子屏幕傳遞額外的數(shù)據(jù)，子屏幕可以通過this.props.screenProps獲取到該數(shù)據(jù)。

Screen Navigation Prop(屏幕的navigation Prop)

當(dāng)導(dǎo)航器中的屏幕被打開時，它會收到一個navigation prop，navigation prop是整個導(dǎo)航環(huán)節(jié)的關(guān)鍵一員，接下來就詳細(xì)講解一下navigation的作用。

navigation包含一下功能：

• navigate：跳轉(zhuǎn)到其他界面；
• state：屏幕的當(dāng)前state；
• setParams：改變路由的params；
• goBack：關(guān)閉當(dāng)前屏幕；
• dispatch：向路由發(fā)送一個action；
• addListener：訂閱導(dǎo)航生命周期的更新；
• isFocused：true 標(biāo)識屏幕獲取了焦點；
• getParam：獲取具有回退的特定參數(shù)；
• dangerouslyGetParent：返回父導(dǎo)航器；

注意：一個navigation有可能沒有navigate、setParams以及goBack，只有state與dispatch，所以在使用navigate時要進(jìn)行判斷，如果沒有navigate可以使用navigation去dispatch一個新的action。如：

const {navigation,theme,selectedTab}=this.props;
const resetAction = StackActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({
            routeName: 'HomePage',
            params:{
                theme:theme,
                selectedTab:selectedTab
            },
        })
    ]
})
navigation.dispatch(resetAction)

提示：這里的reset在2.0及以后版本中被從NavigationActions中移到了StackActions中，使用時記得留意。

StackNavigator的navigation的額外功能:

當(dāng)且僅當(dāng)當(dāng)前 navigator 是 stack navigator 時，this.props.navigation上有一些附加功能。 這些函數(shù)是 navigate 和 goBack 的替代方法， 你可以使用任何你喜歡的方法。 這些功能是：

• this.props.navigation
  • push - 導(dǎo)航到堆棧中的一個新的路由
  • pop - 返回堆棧中的上一個頁面
  • popToTop - 跳轉(zhuǎn)到堆棧中最頂層的頁面
  • replace - 用新路由替換當(dāng)前路由
  • reset - 擦除導(dǎo)航器狀態(tài)并將其替換為多個操作的結(jié)果
  • dismiss - 關(guān)閉當(dāng)前棧

使用navigate進(jìn)行界面之間的跳轉(zhuǎn)

• navigation.navigate({routeName, params, action, key}) 或 navigation.navigate(routeName, params, action)
  • routeName：要跳轉(zhuǎn)到的界面的路由名，也就是在導(dǎo)航其中配置的路由名；
  • params：要傳遞給下一個界面的參數(shù)；
  • action：如果該界面是一個navigator的話，將運(yùn)行這個sub-action；
  • key：要導(dǎo)航到的路由的可選標(biāo)識符。 如果已存在，將后退到此路由；

export const AppStackNavigator = createStackNavigator({
    HomeScreen: {
        screen: HomeScreen
    },
    Page1: {
        screen: Page1
    })

class HomeScreen extends React.Component {
  render() {
    const {navigate} = this.props.navigation;

    return (
      <View>
        <Text>This is HomeScreen</Text>
        <Button
          onPress={() => navigate('Page1', {name: 'Devio'})}
          title="Go to Page1"
        />
      </View>
     )
   }
}

在使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視頻教程中尋找答案哈。

使用state的params

可以通過this.props.state.params來獲取通過setParams()，或navigation.navigate()傳遞的參數(shù)。

<Button
    title={params.mode === 'edit' ? '保存' : '編輯'}
    onPress={() =>
        setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
/>
<Button
    title="Go To Page1"
    onPress={() => {
        navigation.navigate('Page1',{ name: 'Devio' });
    }}
/>
const {navigation} = this.props;
const {state, setParams} = navigation;
const {params} = state;
const showText = params.mode === 'edit' ? '正在編輯' : '編輯完成';

使用setParams 改變route params

• setParams: function setParams(params)：
  我們可以借助setParams來改變route params，比如，通過setParams來更新頁面頂部的標(biāo)題，返回按鈕等；

class ProfileScreen extends React.Component {
  render() {
    const {setParams} = this.props.navigation;
    return (
      <Button
        onPress={() => setParams({name: 'Lucy'})}
        title="Set title name to 'Lucy'"
      />
     )
   }
}

注意navigation.setParams改變的是當(dāng)前頁面的Params，如果要改變其他頁面的Params可以通過NavigationActions.setParams完成，下文會講到。
在使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視頻教程中尋找答案哈。

使用goBack返回到上一頁面或指定頁面

• goBack: function goBack(key)：我們可以借助goBack返回到上一頁或者路由棧的指定頁面。

  • 其中key表示你要返回到頁面的頁面標(biāo)識如id-1517035332238-4，不是routeName。
  • 可以通過指定頁面的navigation.state.key來獲得頁面的標(biāo)識。
  • key非必傳，也可傳null。

  navigation.state
  {params: {…}, key: "id-1517035332238-4", routeName: "Page1"}    ```
  
  

export default class Page1 extends React.Component {
    render() {
        const {navigation} = this.props;
        return <View style={{flex: 1, backgroundColor: "gray",}}>
            <Text style={styles.text}>歡迎來到Page1</Text>
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
        </View>
    }
}

通過dispatch發(fā)送一個action

• dispatch: function dispatch(action)：給當(dāng)前界面設(shè)置action，會替換原來的跳轉(zhuǎn)，回退等事件。

const resetAction = StackActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({
            routeName: 'HomePage',
            params:{
                theme:theme,
                selectedTab:selectedTab
            },
        })
    ]
    })
navigation.dispatch(resetAction)

NavigationActions

• Navigate : 導(dǎo)航到其他的頁面；
• Back : 返回到上一個頁面；
• Set Params : 設(shè)置指定頁面的Params；
• Init : 初始化一個 state 如果 state 是 undefined；

Navigate：

Navigatie action會使用Navigate action的結(jié)果來更新當(dāng)前的state。

方法原型：navigate({routeName, params, action, key})

• routeName：字符串，必選項，在app的router里注冊的導(dǎo)航目的地的routeName。
• params：對象，可選項，融合進(jìn)目的地route的參數(shù)。
• actions：對象，可選項(高級)，如果screen也是一個navigator，次級action可以在子router中運(yùn)行。在文檔中描述的任何actions都可以作為次級action。
• key： string or null 可選，要導(dǎo)航到的路由的標(biāo)識符。如果已存在, 則導(dǎo)航回此路由。

import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)

Back

返回到前一個screen并且關(guān)閉當(dāng)前screen.backaction creator接受一個可選的參數(shù):

方法原型：back(key)

• key：String 可選，這個可以和上文中講到的goBack的key是一個概念；

import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction);

SetParams

通過SetParams我們可以修改指定頁面的Params。

• params：對象，必選參數(shù)，將會被合并到已經(jīng)存在頁面的Params中。
• key：字符串，必選參數(shù)，頁面的key。

import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
    params: { title: 'HomePage' },
    key: 'id-1517035332238-4',
});

有很多小伙伴可能會問：navigation中有setParams為什么還要有NavigationActions.setParams?

我從兩方面來回答一下這個問題：

1. 在上文中講到過navigation中有可能只有state與dispatch，這個時候如果要修改頁面的Params，則只能通過NavigationActions.setParams了；
2. 另外，navigation.setParams只能修改當(dāng)前頁面的Params，而NavigationActions.setParams可以修改所有頁面的Params；

在使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視頻教程中尋找答案哈。

StackActions

• Reset ： 重置當(dāng)前 state 到一個新的state；
• Replace ： 使用另一個路由替換指定的路由；
• Push ： 在堆棧頂部添加一個頁面，然后跳轉(zhuǎn)到該頁面；
• Pop ： 跳轉(zhuǎn)到上一個頁面；
• PopToTop ： 跳轉(zhuǎn)到堆棧最頂層的頁面，并銷毀其他所有頁面；

Reset：

Reset action刪掉所有的navigation state并且使用這個actions的結(jié)果來代替。

• index，數(shù)組，必選，navigation state中route數(shù)組中激活route的index。
• actions，數(shù)組，必選項，Navigation Actions數(shù)組，將會替代navigation state。
• key：string or null 可選， 如果設(shè)置，具有給定 key 的導(dǎo)航器將重置。 如果為null，則根導(dǎo)航器將重置。

import { NavigationActions, StackActions } from 'react-navigation'

const resetAction = StackActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'})
  ]
})
this.props.navigation.dispatch(resetAction)

使用場景比如進(jìn)入APP首頁后的splash頁不在使用，這時可以使用NavigationActions.reset重置它。

index參數(shù)被用來定制化當(dāng)前激活的route。舉個例子：使用兩個routes WelcomePage和HomePage給一個基礎(chǔ)的stack navigation設(shè)置。為了重置route到HomePage，但是在堆棧中又存放在WelcomePage之上，你可以這么做:

import { NavigationActions, StackActions } from 'react-navigation'

const resetAction = StackActions.reset({
    index: 1,
    actions: [
        NavigationActions.navigate({ routeName: 'WelcomePage'}),
        NavigationActions.navigate({ routeName: 'HomePage'})
    ]
});
this.props.navigation.dispatch(resetAction);

replace

Replace - 用另一個路由替換指定的路由

• key - string - 被替換的路由的 key，如果未指定，最近的路由將會被替換
• newKey - string - 用于替換路線的 Key。 如果未提供，則自動生成。
• routeName - string - routeName用于替換路由。
• params - object - 要傳入替換路由的參數(shù)。
• action - object - 可選的子動作。
• immediate* - boolean - 目前沒有效果, 這是 stack navigator 支持動畫替換（它目前不支持）的占位符。

push

Push - 在堆棧頂部添加一條路由，并導(dǎo)航至該路由. 與navigate的區(qū)別在于，如果有已經(jīng)加載的頁面，navigate方法將跳轉(zhuǎn)到已經(jīng)加載的頁面，而不會重新創(chuàng)建一個新的頁面。 push 總是會創(chuàng)建一個新的頁面，所以一個頁面可以被多次創(chuàng)建

• routeName - string - routeName用于替換路由。
• params - object - 將合并到目標(biāo)路由的參數(shù)（通過this.props.navigation.state.params在目標(biāo)路由獲取）。
• action - Object - 可選 - （高級）如果頁面是 navigator，則是在子路由器中運(yùn)行的子操作。

import { StackActions } from 'react-navigation';

const pushAction = StackActions.push({
  routeName: 'Profile',
  params: {
    myUserId: 9,
  },
});

this.props.navigation.dispatch(pushAction);

pop

The pop 一個可以返回到堆棧中上一個路由到方法，通過設(shè)置參數(shù) n，可以指定返回的多少層。

• n - number - 返回的層數(shù)

import { StackActions } from 'react-navigation';

const popAction = StackActions.pop({
  n: 1,
});

this.props.navigation.dispatch(popAction);

popToTop

popToTop 一個可以直接跳轉(zhuǎn)到堆棧最頂層，并銷毀其它所有頁面的方法，它在功能上與StackActions.pop({n：currentIndex})相同。

import { StackActions } from 'react-navigation';

this.props.navigation.dispatch(StackActions.popToTop());

如何支持Schema跳轉(zhuǎn)？

Deep Linking

還有那些應(yīng)用場景？

在導(dǎo)航器屏幕之外使用導(dǎo)航功能(巧用導(dǎo)航器的ref)

有一種場景：有的時候我們需要在導(dǎo)航器中所定義的屏幕之外使用導(dǎo)航器來做頁面跳轉(zhuǎn)。

• 屏幕之間的跳轉(zhuǎn)是需要借助navigation來完成的；
• 我們知道導(dǎo)航器中定義的屏幕可以通過const {navigation} = this.props;來獲取navigation；
• 那么，如果我們在非導(dǎo)航器中所定義的屏幕中做屏幕跳轉(zhuǎn)的關(guān)鍵一步，就是要想法獲取navigation；
• 那么，如何才能在非導(dǎo)航器中所定義的屏幕中獲取到這個navigation呢？

下面就給大家講解通過ref屬性還獲得navigation：

示例看代碼：

import { NavigationActions } from 'react-navigation';

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this. navigation && this. navigation.dispatch(
      NavigationActions.navigate({ routeName: someRouteName })
    );
  }
  render() {
    return (
      <AppNavigator ref={nav => { navigation = nav; }} />
    );
  }
}

上述代碼通過導(dǎo)航器的頂級節(jié)點的ref屬性獲取到navigation，當(dāng)上述代碼的AppNavigator節(jié)點被渲染時，ref會被回調(diào)這是就可以獲取到navigation了，需要提醒大家的是，這種用法對除StackNavigator之外的其他兩種類型的導(dǎo)航器也是實用的哦；

• 大家在學(xué)習(xí)使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視頻教程中尋找答案哈。
• 另外，也可以通過最新版React Native+Redux打造高質(zhì)量上線App視頻教程學(xué)習(xí)React Navigation3x開發(fā)的更多實戰(zhàn)經(jīng)驗和技巧，以及優(yōu)化思路。