『React Navigation 3x系列教程』之React Navigation 3x开发指南

时间 2019-11-17

标签 react navigation 3x 系列教程开发指南栏目 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 Navigation3x开发的一些实用技巧，以及从navigator到React Navigation的一些实战经验。数组

提示：和本文配套的还有一个React Navigation3x的视频教程，欢迎学习。bash

什么是导航器？

导航器也能够当作一个是普通的React组件，你能够经过导航器来定义你的App的导航结构。导航器还能够渲染通用元素，例如能够配置的标题栏和选项卡栏。app

在React Navigation中有如下7种类型的导航器：ide

createStackNavigator: 相似于普通的Navigator，屏幕上方导航栏；
createTabNavigator: createTabNavigator已弃用，使用createBottomTabNavigator和/或createMaterialTopTabNavigator替代；
createBottomTabNavigator：至关于iOS里面的TabBarController，屏幕下方的标签栏；
createMaterialTopTabNavigator：屏幕顶部的材料设计主题标签栏；
createDrawerNavigator: 抽屉效果，侧边滑出；
createSwitchNavigator：SwitchNavigator 的用途是一次只显示一个页面。

你能够经过以上7种导航器来建立你APP，能够是其中一个也能够多个组合，这个能够根据具体的应用场景并结合每个导航器的特性进行选择。函数

在开始学习7种导航器以前，咱们须要先了解两个和导航关于概念：学习

Screen navigation prop(屏幕导航属性)：经过navigation能够完成屏幕之间的调度操做，例如打开另外一个屏幕；
Screen navigationOptions(屏幕导航选项)：经过navigationOptions能够定制导航器显示屏幕的方式（例如：头部标题，选项卡标签等）；

导航器所支持的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)：顶级节点除了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的做用。flex

navigation包含一下功能：

navigate：跳转到其余界面；
state：屏幕的当前state；
setParams：改变路由的params；
goBack：关闭当前屏幕；
dispatch：向路由发送一个action；
addListener：订阅导航生命周期的更新；
isFocused：true 标识屏幕获取了焦点；
getParam：获取具备回退的特定参数；
dangerouslyGetParent：返回父导航器；

注意：一个navigation有可能没有navigate、setParams以及goBack，只有state与dispatch，因此在使用navigate时要进行判断，若是没有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的额外功能:

当且仅当当前 navigator 是 stack navigator 时，this.props.navigation上有一些附加功能。这些函数是 navigate 和 goBack 的替代方法，你可使用任何你喜欢的方法。这些功能是：

this.props.navigation
- push - 导航到堆栈中的一个新的路由
- pop - 返回堆栈中的上一个页面
- popToTop - 跳转到堆栈中最顶层的页面
- replace - 用新路由替换当前路由
- reset - 擦除导航器状态并将其替换为多个操做的结果
- dismiss - 关闭当前栈

使用navigate进行界面之间的跳转

navigation.navigate({routeName, params, action, key}) 或 navigation.navigate(routeName, params, action)
- routeName：要跳转到的界面的路由名，也就是在导航其中配置的路由名；
- params：要传递给下一个界面的参数；
- action：若是该界面是一个navigator的话，将运行这个sub-action；
- key：要导航到的路由的可选标识符。若是已存在，将后退到此路由；

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()传递的参数。

<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来更新页面顶部的标题，返回按钮等；

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改变的是当前页面的Params，若是要改变其余页面的Params能够经过NavigationActions.setParams完成，下文会讲到。在使用React Navigation3x过程当中遇到任何问题均可以在React Navigation3x的视频教程中寻找答案哈。

使用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>
    }
}
复制代码

经过dispatch发送一个action

dispatch: function dispatch(action)：给当前界面设置action，会替换原来的跳转，回退等事件。

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

NavigationActions

Navigate : 导航到其余的页面；
Back : 返回到上一个页面；
Set Params : 设置指定页面的Params；
Init : 初始化一个 state 若是 state 是 undefined；

Navigate：

Navigatie action会使用Navigate action的结果来更新当前的state。

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

routeName：字符串，必选项，在app的router里注册的导航目的地的routeName。
params：对象，可选项，融合进目的地route的参数。
actions：对象，可选项(高级)，若是screen也是一个navigator，次级action能够在子router中运行。在文档中描述的任何actions均可以做为次级action。
key： string or null 可选，要导航到的路由的标识符。若是已存在, 则导航回此路由。

import { NavigationActions } from 'react-navigation'

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

Back

返回到前一个screen而且关闭当前screen.backaction creator接受一个可选的参数:

方法原型：back(key)

key：String 可选，这个能够和上文中讲到的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；

在使用React Navigation3x过程当中遇到任何问题均可以在React Navigation3x的视频教程中寻找答案哈。

StackActions

Reset ：重置当前 state 到一个新的state；
Replace ：使用另外一个路由替换指定的路由；
Push ：在堆栈顶部添加一个页面，而后跳转到该页面；
Pop ：跳转到上一个页面；
PopToTop ：跳转到堆栈最顶层的页面，并销毁其余全部页面；

Reset：

Reset action删掉全部的navigation state而且使用这个actions的结果来代替。

index，数组，必选，navigation state中route数组中激活route的index。
actions，数组，必选项，Navigation Actions数组，将会替代navigation state。
key：string or null 可选，若是设置，具备给定 key 的导航器将重置。若是为null，则根导航器将重置。

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

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

使用场景好比进入APP首页后的splash页不在使用，这时可使用NavigationActions.reset重置它。

index参数被用来定制化当前激活的route。举个例子：使用两个routes WelcomePage和HomePage给一个基础的stack navigation设置。为了重置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 - 要传入替换路由的参数。
action - object - 可选的子动做。
immediate* - boolean - 目前没有效果, 这是 stack navigator 支持动画替换（它目前不支持）的占位符。

push

Push - 在堆栈顶部添加一条路由，并导航至该路由. 与navigate的区别在于，若是有已经加载的页面，navigate方法将跳转到已经加载的页面，而不会从新建立一个新的页面。 push 老是会建立一个新的页面，因此一个页面能够被屡次建立

routeName - string - routeName用于替换路由。
params - object - 将合并到目标路由的参数（经过this.props.navigation.state.params在目标路由获取）。
action - Object - 可选 - （高级）若是页面是 navigator，则是在子路由器中运行的子操做。

import { StackActions } from 'react-navigation';

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

this.props.navigation.dispatch(pushAction);
复制代码

pop

The pop 一个能够返回到堆栈中上一个路由到方法，经过设置参数 n，能够指定返回的多少层。

n - number - 返回的层数

import { StackActions } from 'react-navigation';

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

this.props.navigation.dispatch(popAction);
复制代码

popToTop

popToTop 一个能够直接跳转到堆栈最顶层，并销毁其它全部页面的方法，它在功能上与StackActions.pop({n：currentIndex})相同。

import { StackActions } from 'react-navigation';

this.props.navigation.dispatch(StackActions.popToTop());
复制代码

如何支持Schema跳转？

Deep Linking

还有那些应用场景？

在导航器屏幕以外使用导航功能(巧用导航器的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; }} />
    );
  }
}
复制代码

上述代码经过导航器的顶级节点的ref属性获取到navigation，当上述代码的AppNavigator节点被渲染时，ref会被回调这是就能够获取到navigation了，须要提醒你们的是，这种用法对除StackNavigator以外的其余两种类型的导航器也是实用的哦；

你们在学习使用React Navigation3x过程当中遇到任何问题均可以在React Navigation3x的视频教程中寻找答案哈。
另外，也能够经过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation3x开发的更多实战经验和技巧，以及优化思路。