React-navigation导航系统(5)-Router

2023-12-18 21:32
文章标签 javascript react router frontend navigation 导航系统

本文主要是介绍React-navigation导航系统(5)-Router，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 statereturn 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.getActionForPathAndParams
Object.assign(MyApp.router, {getActionForPathAndParams(path, params) {if (path === 'my/custom/path' &&params.magic === 'yes') {// returns a profile navigate action for /my/custom/path?magic=yesreturn 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 activeroutes: [{// 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组件或者子navigator
  • getScreen-为screen组件设定惰性加载的设定

StackConfig

配置的选项也被传递进入stack router.

  • initalRouteName-stack首次加载的默认路由的routeName
  • initialRouteParams-初始化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的path
  • screen-定制screen组件或者子代navigator
  • getScreen-为一个screen组件设定惰性加载的设置(navigator没有这样的配置)

Tab Router Config

被传递到router的可配置选项

  • initialRouteName-首次加载的tab的routeName
  • order-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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/509827。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2