React Navigation 自认比较好的navigator
#######更新： 最近react-navigation 更新到了1.0.0 beta9 版本，好多东西已经更改了，建议大家去github寻找最新的信息。下面的老版本就做个参考吧。
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>
<Button
onPress={() => 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 router
action: 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 params
key: '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
<Button
onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}
title="Go to Lucy's profile"
/>
);
}
}
//生成路由关系
const ModalStack = StackNavigator({
Home: {
//对应界面MyHomeScreen
screen: MyHomeScreen,
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
});
·API Definition
StackNavigator(RouteConfigs, StackNavigatorConfig)
其中的参数：
RouteConfigs ：
路由配置和路由名称的一种映射，告诉navigator按照该路由要呈现什么。
StackNavigator({
//Home界面route
Home:{
//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: (
<Button
title={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 = (
<Button
title={`${state.params.user}'s info`}
onPress={() => setParams({ mode: 'info' })}
/>
);
if (state.params.mode === 'info') {
right = (
<Button
title="Done"
onPress={() => setParams({ mode: 'none' })}
/>
);
}
let left = (
<Button
title='返回'
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 */}
/>
