react-native 之react-navigation简介

时间 2019-12-08

标签 react native navigation 简介栏目 React 繁體版

原文原文链接

　　原文链接：http://www.devio.org/2018/05/15/navigator-to-react-navigation/　　react

　　1、什么是导航器？

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

在react-navigation中有如下三种类型的导航器：app

StackNavigator: 相似于普通的Navigator，屏幕上方导航栏；
TabNavigator: 至关于iOS里面的TabBarController，屏幕下方的标签栏；
DrawerNavigator: 抽屉效果，侧边滑出；

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

　　两个和导航关于概念：spa

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

　　2、导航器所支持的Props

const SomeNav = StackNavigator/TabNavigator/DrawerNavigator({
  // 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获取到该数据。

　　3、Screen Navigation Prop(屏幕的navigation Prop)

　　　　当导航器中的屏幕被打开时，它会收到一个navigation prop，navigation prop是整个导航环节的关键一员，接下来就详细讲解一下navigation的做用。3d

　　navigation包含一下功能：code

navigate：跳转到其余界面；
state：屏幕的当前state；
setParams：改变路由的params；
goBack：关闭当前屏幕；
dispatch：向路由发送一个action；

　　注意：一个navigation有可能没有navigate、setParams以及goBack，只有state与dispatch，因此在使用navigate时要进行判断，若是没有navigate可使用navigation去dispatch一个新的action。如router

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)

　　4、使用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>
     )
   }
}

　　5、使用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' ? '正在编辑' : '编辑完成';

　　6、使用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完成，下文会讲到。blog

　　7、使用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=>
            <Text style={styles.text}>欢迎来到Page1</Text>
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
        </View> 
    }
}

　　8、经过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)

　　9、NavigationActions

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

　　10、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)

　　11、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)

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

　　index参数被用来定制化当前激活的route。举个例子：使用两个routes WelcomePage和HomePage给一个基础的stack navigation设置。为了重置route到HomePage，可是在堆栈中又存放在WelcomePage之上，你能够这么作:

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

　　12、Back

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

key：这个能够和上文中讲到的goBack的key是一个概念；

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

　　十3、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；

　　十4、还有那些应用场景？

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

　有一种场景：有的时候咱们须要在导航器中所定义的屏幕以外使用导航器来作页面跳转。

屏幕之间的跳转是须要借助navigation来完成的；
咱们知道导航器中定义的屏幕能够经过const {navigation} = this.props;来获取navigation；
那么，若是咱们在非导航器中所定义的屏幕中作屏幕跳转的关键一步，就是要想法获取navigation；
那么，如何才能在非导航器中所定义的屏幕中获取到这个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以外的其余两种类型的导航器也是实用的哦；