react-native中路由页面的跳转与传参的实例详解

 更新时间:2023年08月31日 11:01:40   作者:摆烂到巅峰  
这篇文章主要介绍了react-native中路由页面的跳转与传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

页面跳转

navigate

this.props.navigation.navigate('Details')

跳转到"Details"这个页面,但是如果多次跳转到这个页面,页面路由本质上是不会发生改变的。

push

 this.props.navigation.push('Details')

不建议直接使用push,这样会直接添加路由,而不会看看之前是不是有该路由。

back

返回上一个页面

this.props.navigation.goBack();
或:
this.props.navigation.pop();

Top

返回堆栈中的第一个页面

 this.props.navigation.popToTop()

传参

A跳转到B

this.props.navigation.push('Details', {
     data: 123
 })

B获取A传递的参数

<Text>{this.props.navigation.getParam('data')}</Text>
或:
<Text>{this.props.navigation.state.params.data}</Text>

改变传到B页面的参数:

this.props.navigation.setParams({
    data: '321'
})

到此这篇关于react-native中路由页面的跳转与传参的文章就介绍到这了,更多相关react-native路由跳转与传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ahooks控制时机的hook实现方法

    ahooks控制时机的hook实现方法

    这篇文章主要为大家介绍了ahooks控制时机的hook实现方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Next.js实现react服务器端渲染的方法示例

    Next.js实现react服务器端渲染的方法示例

    这篇文章主要介绍了Next.js实现react服务器端渲染的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React Hooks useReducer 逃避deps组件渲染次数增加陷阱

    React Hooks useReducer 逃避deps组件渲染次数增加陷阱

    这篇文章主要介绍了React Hooks 之 useReducer 逃避deps后增加组件渲染次数的陷阱详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React实现预览展示docx和Excel文件

    React实现预览展示docx和Excel文件

    这篇文章主要为大家详细介绍了如何使用React实现预览展示docx和Excel文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 浅谈redux以及react-redux简单实现

    浅谈redux以及react-redux简单实现

    这篇文章主要介绍了浅谈redux以及react-redux简单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 浅谈react.js 之 批量添加与删除功能

    浅谈react.js 之 批量添加与删除功能

    下面小编就为大家带来一篇浅谈react.js 之 批量添加与删除功能。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 详解在React项目中如何集成和使用web worker

    详解在React项目中如何集成和使用web worker

    在复杂的React应用中,某些计算密集型或耗时操作可能会阻塞主线程,导致用户界面出现卡顿或响应慢的现象,为了优化用户体验,可以采用Web Worker来在后台线程中执行这些操作,本文将详细介绍在React项目中如何集成和使用Web Worker来改善应用性能,需要的朋友可以参考下
    2023-12-12
  • React native ListView 增加顶部下拉刷新和底下点击刷新示例

    React native ListView 增加顶部下拉刷新和底下点击刷新示例

    这篇文章主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 详解如何封装和使用一个React鉴权组件

    详解如何封装和使用一个React鉴权组件

    JavaScript 和 React 提供了灵活的事件处理机制,特别是通过利用事件的捕获阶段来阻止事件传播可以实现精细的权限控制,本文将详细介绍这一技术的应用,并通过实践案例展示如何封装和使用一个 React 鉴权组件,需要的可以参考下
    2024-03-03
  • React为 Vue 引入容器组件和展示组件的教程详解

    React为 Vue 引入容器组件和展示组件的教程详解

    这篇文章主要介绍了React为 Vue 引入容器组件和展示组件的教程详解,文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下
    2018-05-05

最新评论