首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在React Native <Navigator/>中,如何引用传入的当前route.name?

在React Native中,可以通过使用props来引用传入的当前route.name。在<Navigator/>组件中,可以通过在renderScene函数中访问route对象来获取当前的route.name。

以下是一个示例代码:

代码语言:javascript
复制
import React from 'react';
import { Navigator } from 'react-native';

class App extends React.Component {
  renderScene(route, navigator) {
    // 获取当前route.name
    const currentRouteName = route.name;

    // 在这里可以根据当前route.name来渲染不同的组件

    return (
      // 返回要渲染的组件
    );
  }

  render() {
    return (
      <Navigator
        initialRoute={{ name: 'Home' }}
        renderScene={this.renderScene}
      />
    );
  }
}

export default App;

在上面的代码中,我们定义了一个App组件,并在renderScene函数中获取了当前route的name属性,并将其存储在currentRouteName变量中。然后,我们可以根据currentRouteName的值来渲染不同的组件。

请注意,这只是一个示例代码,实际的使用方式可能会根据具体的项目和需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

MobX React Native开发应用

MobX 是一款精准状态管理工具库,如果你 ReactReact Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹豫地说,MobX 简单性将成为你状态管理不二之选...这是我们要增加新条目时转向组件; addListItem,把 this.state.text 传入this.props.store.addListItem。...与输入框绑定 updateText 中会更新this.state.text; removeListItem 调用 this.props.store.removeListItem 并传入条目;... addItemToList 调用 this.props.navigator.push,传入条目和数组存储两个参数; render 方法,通过属性解构数据存储: const { list }...= this.props.store 8. render 方法,也创建了界面,并绑定了类方法 import React, { Component } from 'react' import { View

11.8K70

MobX React Native开发应用

MobX 是一款精准状态管理工具库,如果你 ReactReact Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹豫地说,MobX 简单性将成为你状态管理不二之选...这是我们要增加新条目时转向组件; addListItem,把 this.state.text 传入this.props.store.addListItem。...与输入框绑定 updateText 中会更新this.state.text; removeListItem 调用 this.props.store.removeListItem 并传入条目;... addItemToList 调用 this.props.navigator.push,传入条目和数组存储两个参数; render 方法,通过属性解构数据存储: const { list }...= this.props.store 8. render 方法,也创建了界面,并绑定了类方法 import React, { Component } from 'react' import

12.4K80
  • 【经验分享】React Native全民K歌APP使用分享

    React Native全民K歌APP使用分享 Facebook 于 2015 年 3 月发布了 React Native:使用 ReactJS 编写 Native 代码框架。...使用 JS 编写代码 Native 渲染,用Web 开发效率实现 Native 体验模式,正在打造一条 Web 和 Native 混合开发新道路。...全民K歌于 3.1 版本开始原有的大赛功能模块(webview H5)上尝试进行 React Native 接入和业务改造。接入过程也踩到了很多坑。...这次就是对我们接入以来总结经验进行一次分享。对相对于原来 Web 开发上带来改变进行了对比,并主要阐述了接入以来遇到一些问题和解决(性能、代码、组件、BUG等)。...主要内容包括: React Native 通信机制 React Native 能力优势 接入遇到问题和解决 性能、不足及后续优化 ? 作者: 全民K歌项目团队 calvin、leo、eddy

    7.8K70

    React NativeNavigator

    Navigator React Native目前有几个内置导航器组件,一般来说我们首推Navigator。它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作,同时也便于定制。 ?...你其实已经不知不觉地接触到了场景——在前面的教程,“编写HelloWorld”、“使用Flexbox布局”、“如何使用ListView”组件都是完整场景示例。.../MyScene表示当前目录下MyScene.js文件,也就是我们刚刚创建文件 // 注意即便当前文件和MyScene.js同一个目录,"./"两个符号也是不能省略!...“路由”抽象自现实生活路牌,RN中专指包含了场景信息对象。renderScene方法是完全根据路由提供信息来渲染场景。...它还包含了两个可点击组件TouchableHighlight,会在点击时分别调用通过props传入onForward和onBack方法,而这两个方法各自调用了navigator.push()和navigator.pop

    1.5K80

    React Native自定义导航条

    Navigator和NavigatorIOS 开发,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果切换。...React NativeRN为我们提供了两个组件:Navigator和NavigatorIOS。...() 进行跳转到相当于当前页面的下一个页面 jumpTo(route) 根据传入一个路由信息,跳转到一个指定页面(该页面不会卸载删除) push(route) 导航切换到一个新页面...通过jumpForward()方法可以回退过去 pop() 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前页面 replace(route) 只用传入路由指定页面进行替换掉当前页面...} from 'react-native'; // 引入外部组件(此处注意是相当于了项目根目录) var Home = require('..

    1.5K80

    React NativeNavigator详解

    React Native开发,官方推荐使用Navigator作为导航指示器,早期版本ios/android中都使用Navigator作为通用导航栏,不过在在后来版本,由于Navigator...jumpBack() 该进行回退操作 但是该不会卸载(删除)当前页面 jumpForward() 进行跳转到相当于当前页面的下一个页面 jumpTo(route) 根据传入一个路由信息...通过jumpForward()方法可以回退过去 pop() 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前页面 replace(route) 只用传入路由指定页面进行替换掉当前页面...(route) 进行弹出相关页面,跳转到指定路由页面,弹出来页面会被卸载删除 popToTop() 进行弹出页面,导航到栈第一个页面,弹出来所有页面会被卸载删除 Navigator.IOS...StyleSheet, Text, View } from 'react-native'; class SearchScreen extends Component{ render() {

    1.9K100

    RN项目第一节

    三、框架搭建 1)添加必要依赖 命令行输入以下代码 yarn add react-navigation yarn add react-native-scrollable-tab-view 当然,以上代码可以用...: '#f3f3f3' } 引入需要文件 RootScene文件,引入四个主界面和封装好TabBarItem组件以及React框架必须组件 import React, { Component.../scene/Mine/MineScene' 创建标签栏 react-navigation这个组件,标签栏是由TabNavigator组件创建,将要加入到标签栏页面添加并设置标题、样式、图标等属性即可...要设置状态栏必须先导入StateBar组件 import { StatusBar } from 'react-native' 构造函数,先将所有页面状态栏状态都设置为亮色。...组件会给该方法传入目前界面场景与先前场景。 用变量接受当前场景和上一个场景路由,如果上一个场景不是当前场景,就是更换过一个场景。并且当前场景亮色状态数组,就改为白色,否则改为黑色。

    2.8K60

    React NativeNavigator详解

    React Native开发,官方推荐使用Navigator作为导航指示器,早期版本ios/android中都使用Navigator作为通用导航栏,不过在在后来版本,由于Navigator...jumpBack() 该进行回退操作 但是该不会卸载(删除)当前页面 jumpForward() 进行跳转到相当于当前页面的下一个页面 jumpTo(route) 根据传入一个路由信息...通过jumpForward()方法可以回退过去 pop() 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前页面 replace(route) 只用传入路由指定页面进行替换掉当前页面...(route) 进行弹出相关页面,跳转到指定路由页面,弹出来页面会被卸载删除 popToTop() 进行弹出页面,导航到栈第一个页面,弹出来所有页面会被卸载删除 Navigator.IOS...StyleSheet, Text, View } from 'react-native'; class SearchScreen extends Component{ render() {

    1.8K100

    React Native+React Navigation+Redux开发实用教程

    为了帮助大家快速上手React Native与Redux开发,在这本文中将向大家介绍如何React Native中使用Redux?,以及一些必备基础以及高级知识。...本参考了《新版React Native+Redux打造高质量上线App》课程部分讲解,更多关于React Native与Redux实战技巧可在《新版React Native+Redux打造高质量上线...那么如何React Native中使用Redux和react-navigation组合?呢?...Redux+react-navigation场景处理 Android 物理返回键 Redux+react-navigation场景处理Android物理返回键需要注意当前路由所以位置,...; 如何动态设置store,和动态获取store(难点:storekey不固定); 如何实现可取消redux action:可参考SearchPage设计; 上述实战技巧可在新版React Native

    3.9K10

    如何开发适配安卓和iOS双平台React Native应用

    我们可以用React Native开发Android应用也可以开发iOS应用,那么如何让我们开发React Native应用适配Android和iOS双平台呢?...留意api docandroid或ios标识 并不是所有React Native一些api或组件一些属性和方法都兼容Android和iOS,React Nativeapi doc通常会在一些属性或方法前面加上...组件选择 React Native发展到现在已经有相当丰富组件来供开发者使用,那么从适配Android和iOS平台角度如何甄选这些组件呢?...比如,我们要开发一款应用需要用到导航组件,React Native组件中有NavigatorIOS与Navigator两个导航组件来供我们选择,从api doc我们可以看出NavigatorIOS只支持.../img/check.png')} /> 提示:我们使用具有不同分辨率图标时,一定要引用标准分辨率图片如require('./img/check.png'),如果我们这样写require('.

    3.3K20

    React Native 开发适配心得

    我们可以用React Native开发Android应用也可以开发iOS应用,那么如何让我们开发React Native应用适配Android和iOS双平台呢?...留意api docandroid或ios标识 并不是所有React Native一些api或组件一些属性和方法都兼容Android和iOS,React Nativeapi doc通常会在一些属性或方法前面加上...比如,我们要开发一款应用需要用到导航组件,React Native组件中有NavigatorIOS与Navigator两个导航组件来供我们选择,从api doc我们可以看出NavigatorIOS只支持...关于如何开发React Native原生模块大家可以参看双平台真实开发GitHub App React Native技术全面掌握。...以上便是我对于React Native适配Android和iOS上一些心得, 如果大家适配Android和iOS遇到问题可以本文下方进行留言,我看到了后会及时回复哦。

    2.4K50

    React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写。我们都知道,一个App不可能只有一个不变界面,而是通过多个界面间跳转来呈现不同内容。那么这篇文章将介绍RN导航。...RN中有两个组件负责实现这样效果,它们是: NavigatorIOS React Navigation 你可能在很多地方听说过Navigator,这个老组件会逐渐被React Navigation代替...Navigator 从0.44版本开始,Navigator被从react native核心组件库剥离到了一个名为react-native-deprecated-custom-components单独模块...如果你需要继续使用Navigator,则需要先yarn add react-native-deprecated-custom-components安装,然后从这个模块import,即import {...解决办法:进入当前项目文件,安装Navigator所在库。

    6K80

    hippy-react 三端同构 — 路由

    @hippy/react 以及 @hippy/react-web Navigator 组件功能相对比较欠缺,两端都没有比较好实现页面跳转功能。...同时也有native react-router-native react-router-nativereact-router native版本,但是其基于 react-native 中比较完善...经过分析和实现,无法 Hippy 中直接使用 react-router-native react-router MemoryRouter,基于纯js实现路由,不需要依赖于 URL,这使得其可以应用在...因此使用 react-router 可以同时支持原生和web页面切换,进行多页面开发 2.1 hippyreact-router使用 通过 Platform.OS 对当前平台进行判断 原生项目中使用...一样 无法使用 react-router-transition 动画 原生返回操作,直接回关闭 hippy 项目 Link 使用过程,需要传入 component。

    2.8K51

    React 与 Preact PWA 性能分析报告

    例子,使用服务端渲染,首屏渲染时间减少到1.1s,首屏完整渲染时间减少到2.4s - 这提高了用户页面加载速度感知,他们可以更提前获取内容,而且测试显示SEO也略微改善。...另外它还包含: 虚拟DOM(Virtual DOM)和真实DOM对比 支持class和forprops render方法传入了(props, state) 使用标准浏览器事件...考虑如何更好打包你第三方库,这样路由只会加载页面所需要库 Treebo使用webpack-bundle-analyzer来跟踪他们包大小变化,并在每个路由块监视其中包含模块。...webpack-bundle-analyzer分析结果,他们发现“react-router”包含“history”模块包含了“query-string”模块。 ?...双重引用 Treebo也意识到,虽然他们是异步加载应用剩余CSS(加载内联对应路径CSS之后),随着他们应用发展,从长远来看,这种方法对用户是不可行

    2.2K20

    【Hybrid开发高级系列】ReactNative(四) —— 基础开发技巧

    通过不同场景使用不同属性定制,可以尽量提高自定义组件复用范畴。只需render函数引用this.props,然后按需处理即可。...你还可以传入一个数组——在数组位置居后样式对象比居前优先级更高,这样你可以间接实现样式继承。         ...1.9.1 Navigator         React Native目前有几个内置导航器组件,一般来说我们首推Navigator。.../MyScene表示当前目录下MyScene.js文件,也就是我们刚刚创建文件 // 注意即便当前文件和MyScene.js同一个目录,"./"两个符号也是不能省略!...它还包含了两个可点击组件TouchableHighlight,会在点击时分别调用通过props传入onForward和onBack方法,而这两个方法各自调用了navigator.push()和navigator.pop

    37620

    四个Vue写法优化技巧

    watch优化写法 我们平时总会遇到组件创建时获取列表,筛选项改变后刷新列表需求,watch逻辑,还要在组件created()再执行一遍,以下写法解决此痛点。...开发大型应用时,很多页面用到很多公共UI库组件,按照Vue原本写法,每种组件都要在每个页面引用一次,真是好累,如何省事偷懒呢?...优化点2:Dom原生事件可以通过$listeners实现非声明式传入,$listeners包含了父作用域中不含.native修饰器事件监听(v-on:),如果是更多层级,可以通过v-on="$listeners...注意:默认父作用与不被认为是props属性将会回退到子组件根元素上,也就是例子label上,需在当前子组件Vue内部设置inheritAttrs: false good <!...,其实这种写法应该是更贴近React思路,所以学会用js来生成HTML吧 函数式组件render写法 // 注意,如果使用这种JSX写法,要引入`babel-plugin-transform-vue-jsx

    1.5K60

    React Native 导航:示例教程

    构建移动应用程序时,首要考虑如何处理用户应用程序导航问题,例如屏幕展示和屏幕之间切换。 React Navigation 是 React Native 最著名导航库之一。...本教程,我们将探讨 React Native 中导航基础知识,介绍如何开始使用 React Navigation,并通过一些 React Native 导航示例进行讲解。...撰写本文时,React Native Navigation 的当前稳定版本是 React Navigation 6.1。...另一种选择:React Router Native React Router Native React Native 应用程序实现导航功能另一种解决方案。它由 Remix 团队开发。...React Native 导航器 React Native 本节,我们将探讨 React Native 导航不同导航器,以及如何使用 React Navigation 库实现它们。

    31910

    React NativeReact速学教程()

    React NativeReact速学教程() 本文出自《React Native学习笔记》系列文章。...React Native是基于React开发React Native过程少不了需要用到React方面的知识。虽然官方也有相应Document,但篇幅比较多,学起来比较枯燥。...为了方便大家学习,我将《React NativeReact速学教程》分为上、、下三篇,大家可以根据需要进行阅读学习。 概述 本篇为《React NativeReact速学教程》第二篇。...注意 这些方法不能获取组件 props 和 state。如果你想在静态方法检查 props 值,调用处把 props 作为参数传入到静态方法。...React 设计时候通过setState()被调用时做了一些检查,来帮助开发者发现被卸载组件还持有一些资源引用情况。

    2.3K80
    领券