React Navigation 自认比较好的navigator组件(一)

本文主要是介绍React Navigation 自认比较好的navigator组件(一)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

#更新： 最近react-navigation 更新到了1.0.0 beta9 版本，好多东西已经更改了，建议大家去github寻找最新的信息。下面的老版本就做个参考吧。http://www.jianshu.com/p/80408a62d690

React Navigation https://reactnavigation.org/docs/navigators/stack

控件主要分为三种：
1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏
2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏
3.DrawerNavigator：抽屉效果，左侧滑出这种效果。

Screen Navigation Prop

在你的app中，每一个界面都会得到一个navigation prop，包含着以下一些属性和action：

navigate - Link to other screens

调用此方法去链接你的其他界面，包含以下参数：
·routeName- 目标路由名称，将在你的app router中注册
·params-将参数合并到目标router中
·action-(高级)sub-action ，如果该界面是一个navigator的话，将运行这个sub-action
example：

class HomeScreen extends React.Component {render() {const {navigate} = this.props.navigation;return (<View><Text>This is the home screen of the app</Text><ButtononPress={() => navigate('Profile', {name: 'Brent'})}title="Go to Brent's profile"/></View>)}
}

state-The screen's current state/route

每个界面通过this.props.navigation.state去访问它的router，state其中包括了：
·routeName - router配置的名称
·key-用来区分router的唯一标示
·params-可选的一些string参数

setParams-Make changes to route params

该方法允许界面更改router中的参数，可以用来动态的更改header的内容

goBack-Close the active screen and move back

返回，pop回上一级

dispatch -Send an action to the router

使用dispatch可以向任何navigation传递一些其他的action，主要支持的action有：

Navigate

import { NavigationActions } from 'react-navigation'const navigationAction = NavigationActions.navigate({routeName: 'Profile',params: {},// navigate can have a nested navigate action that will be run inside the child routeraction: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigationAction)

Reset

Reset方法会擦除掉所有的导航状态，并且使用内部新的结果替代

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

可以指定多个action，但是要给定正确的index

SetParams

为指定的router更新参数，该参数必须是已经存在于router的param中，

import { NavigationActions } from 'react-navigation'const setParamsAction = NavigationActions.setParams({params: {}, // these are the new params that will be merged into the existing route params// The key of the route that should get the new paramskey: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

StackNavigator

简单的例子

class MyHomeScreen extends React.Component {static navigationOptions = {title: 'Home',    //设置navigator的title}render() {return (//button的onPress方法，实现点击跳转界面，并且传递参数name:Lucy<ButtononPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}title="Go to Lucy's profile"/>);}
}//生成路由关系
const ModalStack = StackNavigator({Home: {//对应界面MyHomeScreenscreen: MyHomeScreen,},Profile: {path: 'people/:name',screen: MyProfileScreen,},
});

·API Definition

StackNavigator(RouteConfigs, StackNavigatorConfig)

其中的参数：

RouteConfigs ：

路由配置和路由名称的一种映射，告诉navigator按照该路由要呈现什么。

StackNavigator({//Home界面routeHome:{//require  screen就是一个react的组件(component)，用来展示的那个界面screen:HomeScreen,//optional   当深层次关联或者在web app中使用React Navigation,使用路径path:'people/:username',//optional Override navigationOptions方法，对navigator做一些配置navigationOptions:{//设置个标题title:({state}) => `${state.params.username}'s Profile'`},},//我的其他路由，类似于上面这种定义模式的，供给navigator实现页面见得跳转...MyOtherRoutes,
)}

StackNavigatorConfig

option for the route(路由选项):
·initialRouteName -为stack设置默认的界面，必须和route configs里面的一个key匹配。
·initialRouteParams - 初始路由的参数。
·navigationOptions- 屏幕导航的默认选项。
·paths-route config里面路径设置的映射。

Visual Option(视觉选项):
·mode- 定义渲染(rendering)和转换(transitions)的模式,两种选项(给字符串即可)：
1) card-使用标准的iOS和Android的界面切换，这是默认的。
2)modal- 仅在iOS端有用，即模态出该视图。
·headerMode- 指定header应该如何被渲染,选项：
1)float- 共用一个header 意思就是有title文字渐变效果。
2)screen- 各用各的header 意思就是没有title文字渐变效果。
3)none- 没有header。
·cardStyle- 使用该属性继承或者重载一个在stack中的card的样式。
·onTransitionStart- 一个函数，在换场动画开始的时候被激活。
·onTransitionEnd- 一个函数，在换场动画结束的时候被激活。

Screen Navigation Options

通常你可以定义一个静态的navigationOptions在你的组件之上，例如:

class ProfileScreen extends React.Component {//设置navigation选项static navigationOptions = {//标题title: ({ state }) => `${state.params.name}'s Profile!`,//头部定义了一个右按钮，来改变edit的状态 ing或者完成header: ({ state, setParams }) => ({// Render a button on the right side of the header// When pressed switches the screen to edit mode.right: (<Buttontitle={state.params.editing ? 'Done' : 'Edit'}onPress={() => setParams({editing: state.params.editing ? false : true})}/>),}),};...

All navigationOptions for the StackNavigator:
·title- 界面的标题(string)
·header- header bar设置对象
1)visible - bool值，header是否可见。
2)title-标题 String或者是一个react 节点
3)backTitle-返回按钮在iOS平台上，默认是title的值
4)right- react 节点显示在header右边，例如右按钮
5)left- react 节点显示在header左边，例如左按钮
6)style-header的style
7)titleStyle- header的title的style (^__^) 嘻嘻……
8)tintColor- header的前景色
·cardStack- 配置card stack
1)gesturesEnabled- 是否允许通过手势关闭该界面，在iOS上默认为true，在Android上默认为false
再来一个例子，自定义的header:

static navigationOptions = {title: ({ state }) => {if (state.params.mode === 'info') {return `${state.params.user}'s Contact Info`;}return `Chat with ${state.params.user}`;},header: ({ state, setParams ,goBack}) => {// The navigation prop has functions like setParams, goBack, and navigate.  可以在header的构造方法里面传入setParams，goBack，navigate方法.let right = (<Buttontitle={`${state.params.user}'s info`}onPress={() => setParams({ mode: 'info' })}/>);if (state.params.mode === 'info') {right = (<Buttontitle="Done"onPress={() => setParams({ mode: 'none' })}/>);}let left = (<Buttontitle='返回'onPress={() => {goBack();}}/>);return { right ,left};},};

Navigator Props

一个navigator组件被StackNavigator(...)创建出来，可以伴随以下属性。
·screenProps- 为子界面传递额外的参数、选项，for example：

const SomeStack = StackNavigator({// config 配置该navigator
});<SomeStack//通过this.props.screenProps获得该参数内容screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

这篇关于React Navigation 自认比较好的navigator组件(一)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---