React-navigation导航系统(5)-Router
来源:互联网 发布:coc淘宝买宝石安全吗 编辑:程序博客网 时间:2024/06/08 16:56
tags: React-Native
Routers
Router定义一个组件的navigation state,允许开发者定义路径和可以操作的actions.
内建的Routers
- StackRouter
- TabRouter
使用Routers
为了手动定制一个navigator,在组件里可以放一个静态的router
.(使用内建的组件快速的定制一个navigator,使用Navigator Factory更容易实现).
class MyNavigator extends React.Component { static router = StackRouter(routes, config); ...}
现在你可以把这个组件作为另一个navigator的screen
对待,MyNavigator
的导航逻辑在StackRouter
中定义.
定制化Router
看看[定制Router API 部分](https://reactnavigation.org/docs/routers/api)
学习StackRouter
和TabRouter
的API.
只要你愿意也可以重写router的函数.
定制Navigation的Actions
为了重写navigation的行为,你可以在getStateForAction
中重写navigation state的逻辑,从而手动处理routes
和index
.
const MyApp = StackNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen },}, { initialRouteName: 'Home',})MyApp.router = { ...MyApp.router, getStateForAction(action, state) { if (state && action.type === 'PushTwoProfiles') { const routes = [ ...state.routes, {key: 'A', routeName: 'Profile', params: { name: action.name1 }}, {key: 'B', routeName: 'Profile', params: { name: action.name2 }}, ]; return { ...state, routes, index: routes.length - 1, }; } return MyApp.router.getStateForAction(action, state); },};
阻止某些Navigation的Actions
有时候根据你的route,需要阻止某些navigation的活动
const MyStackRouter = StackRouter({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen },}, { initialRouteName: 'Home',})const MyAppRouter = { ...MyStackRouter, getStateForAction(action, state) { if ( state && action.type === NavigationActions.BACK && state.routes[state.index].params.isEditing ) { // Returning null from getStateForAction means that the action // has been handled/blocked, but there is not a new state return null; } return MyStackRouter.getStateForAction(action, state); },};
操作定制URIs
或许你的app有一个独特的URI,内建的routers处理不了.你可以通过getActionForPathAndParams
来扩展router.
import { NavigationActions } from 'react-navigation'const MyApp = StackNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen },}, { initialRouteName: 'Home',})const previousGetActionForPathAndParams = MyApp.router.getActionForPathAndParamsObject.assign(MyApp.router, { getActionForPathAndParams(path, params) { if ( path === 'my/custom/path' && params.magic === 'yes' ) { // returns a profile navigate action for /my/custom/path?magic=yes return NavigationActions.navigate({ routeName: 'Profile', action: NavigationActions.navigate({ // This child action will get passed to the child router // ProfileScreen.router.getStateForAction to get the child // navigation state. routeName: 'Friends', }), }); } return previousGetActionForPathAndParams(path, params); },};
定制Router API
你可以童工下面的函数来构建自己的router对象,
const MyRouter = { getStateForAction: (action, state) => ({}), getActionForPathAndParams: (path, params) => null, getPathAndParamsForState: (state) => null, getComponentForState: (state) => MyScreen, getComponentForRouteName: (routeName) => MyScreen,};// Now, you can make a navigator by putting the router on it:class MyNavigator extends React.Component { static router = MyRouter; render() { ... }}
getStateForAction(action,state)
根据给定的action来定义返回的navigation sate.当一个action通过props.navigation.dispatch()
传递,或者任何其他的助手函数被调用,例如navigation.navitate()
的时候,这个函数将会运行.
通常这个函数将会以下面的形式返回navitaion state.
{ index: 1, // identifies which route in the routes array is active routes: [ { // Each route needs a name to identify the type. routeName: 'MyRouteName', // A unique identifier for this route in the routes array: key: 'myroute-123', // (used to specify the re-ordering of routes) // Routes can have any data, as long as key and routeName are correct ...randomRouteData, }, ...moreRoutes, ]}
如果router已经在外部处理了acion,或者想不改变任何的navigation state就消化它,这个函数就返回null
.
getComponentForRouterName(routeName)
为给定的route name返回子组件或者navigator.
像这样声明一个routergetStateForAction
输出的state.
{ index: 1, routes: [ { key: 'A', routeName: 'Foo' }, { key: 'B', routeName: 'Bar' }, ],}
基于state中的额routeName,router将会调用router.getComponentForRouteName('Foo')
或router.getComponentForRouteName('Bar')
来返回对应的有效组件.
getComponentForState(state)
从深度嵌套navigation state返回激活的组件
getActionForPathAndParams
返回一个可选配置的navigation action,在用户导航到这个路径并且有可选的查询参数的时候使用这个action.
getPathAndParamsForState
用户在app中返回同一个URL链接的点时,这个函数返回路径和参数.
从这个函数返回的路径和参数应该是从一个action获得的,这个action是重传进入router的getActionForPathAndParams
的.这个action一旦通过getStateForAction
传递,会给你返回形似的state.
getScreenConfig
这个函数从一个route获取navigation的可选项.必须要提供screen的当前navigation prop和被返回的选项的名字.
navigation
-这是screen将会使用的navigation prop,对应在screen的route和state.Dispatch将会根据screen的上下文来触发actions.optionName
-被获取的选项的名字,例如’title’
在实例的视图内,或许你需要远程获取配置的标题
// First, prepare a navigation prop for your child, or re-use one if already available.const childNavigation = addNavigationHelpers({ // In this case we use navigation.state.index because we want the title for the active route. state: navigation.state.routes[navigation.state.index], dispatch: navigation.dispatch,})const screenTitle = this.props.router.getScreenConfig(childNavigation, 'title');
StackRouter
管理navigation堆栈的逻辑,包括入栈,出栈,操作路径解析创建深层次的堆栈.
让我们看看简单的stack router
const MyApp = StackRouter({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen },}, { initialRouteName: 'Home',})
RouteConfig
最简单的stack router期待的参数是一个config对象,这里是示例配置
const MyApp = StackRouter({ // This is the RouteConfig: Home: { screen: HomeScreen, path: '', }, Profile: { screen: ProfileScreen, path: 'profile/:name', }, Settings { // This can be handy to lazily require a screen: getScreen: () => require('Settings').default, // Note: Child navigators cannot be configured using getScreen because // the router will not be accessible. Navigators must be configured // using `screen: MyNavigator` path: 'settings', },});
每一个在config中的条目有如下内容
path
-设定条目的路径和参数可以在stack中被解析screen
-设定screen组件或者子navigatorgetScreen
-为screen组件设定惰性加载的设定
StackConfig
配置的选项也被传递进入stack router.
initalRouteName
-stack首次加载的默认路由的routeNameinitialRouteParams
-初始化route的默认参数paths
-提供routeName到path配置的映射,将会重写routeConfigs里的path设置
Supported Actions
stack router可以对下面的导航actions作为响应.如果有可能,router将会代理到子代router的action操作.
- Navigate-如果routeName和router的routerConfigs其中之一匹配,将会push一个新的route到堆栈.
- Back-返回(props)
- Reset-清除堆栈,提供一个新的actions创建新的navigation state
- SetParams-screen dispatch一个action去改变当前route的参数
TabRouter
管理应用中的一套tabs,处理tabs之间的跳转,处理back键的操作返回到初始化的tab.
看看简单的tabs router
const MyApp = TabRouter({ Home: { screen: HomeScreen }, Settings: { screen: SettingsScreen },}, { initialRouteName: 'Home',})
RouteConfig
tabs router有为每一个tab的routeConfig
const MyApp = TabRouter({ // This is the RouteConfig: Home: { screen: HomeScreen, path: 'main', }, Settings: { // This can be handy to lazily require a tab: getScreen: () => require('./SettingsScreen').default, // Note: Child navigators cannot be configured using getScreen because // the router will not be accessible. Navigators must be configured // using `screen: MyNavigator` path: 'settings', },});
config中的每一个config可能有
config
-每一个tab的pathscreen
-定制screen组件或者子代navigatorgetScreen
-为一个screen组件设定惰性加载的设置(navigator没有这样的配置)
Tab Router Config
被传递到router的可配置选项
initialRouteName
-首次加载的tab的routeNameorder
-tabs的顺序path
-提供routeName到path config的映射,映射重写routeConfig中的path设定backBehavior
-点击back按钮应该返回到初始化的tab吗?如果是的话,设置initialRoute
,否则就是none
,默认到initialRoute
的行为.
Support Actions
tabs router会对下面的navigation actions做出响应.如果有可能,router将代理到子代router的action.
- Navigate-如果和tab的routeName匹配,就会跳转到对应的tab
- Back-如果不是第一个默认的tab,就跳转到第一个tab
- SetParams-screen dispatch一个Action来改变当前route的state
- React-navigation导航系统(5)-Router
- React-navigation导航系统(1)
- React-navigation导航系统(2)
- React-navigation导航系统(6)-Views
- React-navigation导航系统(3)-高级指南
- Navigation导航系统
- React-navigation导航系统(4)-Redux的整合实例
- Unity之Navigation导航系统
- 2.13navigation导航系统
- react-navigation Navigation使用
- react-navigation
- react-navigation
- react-navigation
- react-navigation
- react-router
- React Router
- React/Router
- react-router
- JavaScript的数据类型和包装对象
- 算法竞赛入门经典(第2版) 习题2-2
- 广度优先搜索算法
- 2
- 使用jquery.autocomplete.js插件实现自动补全进行查询
- React-navigation导航系统(5)-Router
- tomcat配置问题
- 字符串中Emoji表情处理(博客园迁移)
- 图的邻接表建立以及DFS和BFS
- JS HTML5事件
- React-navigation导航系统(6)-Views
- Centos 7.0设置/etc/rc.local无效问题解决
- java并发编程实践之对象的共享
- com.fasterxml.jackson.databind.JsonMappingException: Can not deserialize out of START_ARRAY token