本文主要是介绍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组件(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!