從navigator到react-navigation進階教程

時間 2019-11-16

標籤 navigator react navigation 進階教程欄目 React 简体版

原文原文鏈接

隨着react-navigation逐漸穩定，Navigator也被光榮的退休了。在React Native生態環境中須要一款可擴展且易於使用的導航組件，Navigator 天然勝任不了，這時React Native社區便孕育出了一個開源導航組件react-navigation。html

react-navigation的出現替代了Navigator、 Ex-Navigation等老一代的導航組件，react-navigation能夠說是Navigator的增強版，不只有Navigator的所有功能，另外還支持底部導航相似於與iOS中的UITabBarController，此外它也支持側拉效果方式的導航相似於Android中的抽屜效果。react

這篇文章將向你們分享react-navigation的一些實用技巧，以及從navigator到react-navigation的一些實戰經驗。另外你們也能夠學習與本教程配套的視頻版：《全新導航器react-navigation精講》數組

什麼是導航器？

導航器也能夠當作一個是普通的React組件，你能夠經過導航器來定義你的App的導航結構。導航器還能夠渲染通用元素，例如能夠配置的標題欄和選項卡欄。bash

在react-navigation中有如下三種類型的導航器：app

StackNavigator: 相似於普通的Navigator，屏幕上方導航欄；
TabNavigator: 至關於iOS裏面的TabBarController，屏幕下方的標籤欄；
DrawerNavigator: 抽屜效果，側邊滑出；

{:height="90%" width="90%"}

你能夠經過以上三種導航器來建立你APP，能夠是其中一個也能夠多個組合，這個能夠根據具體的應用場景並結合每個導航器的特性進行選擇。學習

在開始學習三種導航器以前，咱們須要先了解兩個和導航關於概念：flex

Screen navigation prop(屏幕導航屬性)：經過navigation能夠完成屏幕之間的調度操做，例如打開另外一個屏幕；
Screen navigationOptions(屏幕導航選項)：經過navigationOptions能夠定製導航器顯示屏幕的方式（例如：頭部標題，選項卡標籤等）；

導航器所支持的Props

const SomeNav = StackNavigator/TabNavigator/DrawerNavigator({
  // config
});

<SomeNav
  screenProps={xxx}
  ref={nav => { navigation = nav; }}
  onNavigationStateChange=(prevState, newState, action)=>{
  	
  }
/>
複製代碼

@全新導航器react-navigation精講ui

ref：能夠經過ref屬性獲取到navigation；
onNavigationStateChange(prevState, newState, action)：頂級節點除了ref屬性以外，還接受onNavigationStateChange(prevState, newState, action)屬性，每次當導航器所管理的state發生改變時，都會回調該方法；
- prevState：變化以前的state；
- newState：新的state；
- 致使state變化的action；
screenProps：向子屏幕傳遞額外的數據，子屏幕能夠經過this.props.screenProps獲取到該數據。

Screen Navigation Prop(屏幕的navigation Prop)

當導航器中的屏幕被打開時，它會收到一個navigation prop，navigation prop是整個導航環節的關鍵一員，接下來就詳細講解一下navigation的做用。this

navigation包含一下功能：spa

navigate：跳轉到其餘界面；
state：屏幕的當前state；
setParams：改變路由的params；
goBack：關閉當前屏幕；
dispatch：向路由發送一個action；

注意：一個navigation有可能沒有navigate、setParams以及goBack，只有state與dispatch，因此在使用navigate時要進行判斷，若是沒有navigate可使用navigation去dispatch一個新的action。如：

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

@全新導航器react-navigation精講

使用navigate進行界面之間的跳轉

navigate(routeName, params, action)
- routeName：要跳轉到的界面的路由名，也就是在導航其中配置的路由名；
- params：要傳遞給下一個界面的參數；
- action：若是該界面是一個navigator的話，將運行這個sub-action。

export const AppStackNavigator = StackNavigator({
    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-navigation精講

使用state的params

能夠經過this.props.state.params來獲取經過setParams()，或navigation.navigate()傳遞的參數。

<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' ? '正在編輯' : '編輯完成';
複製代碼

@全新導航器react-navigation精講

使用setParams 改變route params

setParams: function setParams(params)：咱們能夠藉助setParams來改變route params，好比，經過setParams來更新頁面頂部的標題，返回按鈕等；

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

@全新導航器react-navigation精講

注意navigation.setParams改變的是當前頁面的Params，若是要改變其餘頁面的Params能夠經過NavigationActions.setParams完成，下文會講到。

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

goBack: function goBack(key)：咱們能夠藉助goBack返回到上一頁或者路由棧的指定頁面。
- 其中key表示你要返回到頁面的頁面標識如id-1517035332238-4，不是routeName。
- 能夠經過指定頁面的navigation.state.key來得到頁面的標識。
- 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> 
    }
}
複製代碼

@全新導航器react-navigation精講

經過dispatch發送一個action

dispatch: function dispatch(action)：給當前界面設置action，會替換原來的跳轉，回退等事件。

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

@全新導航器react-navigation精講

NavigationActions

Navigate : 導航到其餘的頁面；
Reset : 重置當前 state 到一個新的state；
Back : 返回到上一個頁面；
Set Params : 設置指定頁面的Params；
Init : 初始化一個 state 若是 state 是 undefined；

Navigate：

Navigatie action會使用Navigate action的結果來更新當前的state。

routeName：字符串，必選項，在app的router裏註冊的導航目的地的routeName。
params：對象，可選項，融合進目的地route的參數。
actions：對象，可選項(高級)，若是screen也是一個navigator，次級action能夠在子router中運行。在文檔中描述的任何actions均可以做爲次級action。

import { NavigationActions } from 'react-navigation'

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

@全新導航器react-navigation精講

Reset：

Reset action刪掉全部的navigation state而且使用這個actions的結果來代替。

index，number，必選，navigation state中route數組中激活route的index。
actions，array，必選項，Navigation Actions數組，將會替代navigation state。

import { NavigationActions } from 'react-navigation'

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

@全新導航器react-navigation精講

使用場景好比進入APP首頁後的splash頁不在使用，這時可使用NavigationActions.reset重置它。

index參數被用來定製化當前激活的route。舉個例子：使用兩個routes WelcomePage和HomePage給一個基礎的stack navigation設置。爲了重置route到HomePage，可是在堆棧中又存放在WelcomePage之上，你能夠這麼作:

import { NavigationActions } from 'react-navigation'

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

@全新導航器react-navigation精講

Back

返回到前一個screen而且關閉當前screen.backaction creator接受一個可選的參數:

key：這個能夠和上文中講到的goBack的key是一個概念；

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

SetParams

經過SetParams咱們能夠修改指定頁面的Params。

params：對象，必選參數，將會被合併到已經存在頁面的Params中。
key：字符串，必選參數，頁面的key。

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

有不少小夥伴可能會問：navigation中有setParams爲何還要有NavigationActions.setParams?

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

在上文中講到過navigation中有可能只有state與dispatch，這個時候若是要修改頁面的Params，則只能經過NavigationActions.setParams了；
另外，navigation.setParams只能修改當前頁面的Params，而NavigationActions.setParams能夠修改全部頁面的Params；

還有那些應用場景？

在導航器屏幕以外使用導航功能(巧用導航器的ref)

有一種場景：有的時候咱們須要在導航器中所定義的屏幕以外使用導航器來作頁面跳轉。

屏幕之間的跳轉是須要藉助navigation來完成的；
咱們知道導航器中定義的屏幕能夠經過const {navigation} = this.props;來獲取navigation；
那麼，若是咱們在非導航器中所定義的屏幕中作屏幕跳轉的關鍵一步，就是要想法獲取navigation；
那麼，如何才能在非導航器中所定義的屏幕中獲取到這個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; }} />
    );
  }
}
複製代碼