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路由跳转与传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

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

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

    这篇文章主要介绍了React Hooks 之 useReducer 逃避deps后增加组件渲染次数的陷阱详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • create-react-app如何降低react的版本

    create-react-app如何降低react的版本

    这篇文章主要介绍了create-react-app降低react的版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React-RouterV6+AntdV4实现Menu菜单路由跳转的方法

    React-RouterV6+AntdV4实现Menu菜单路由跳转的方法

    这篇文章主要介绍了React-RouterV6+AntdV4实现Menu菜单路由跳转,主要有两种跳转方式一种是编程式跳转另一种是NavLink链接式跳转,每种方式通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • React自定义Hook之如何优雅管理复杂列表的筛选状态

    React自定义Hook之如何优雅管理复杂列表的筛选状态

    在Web开发中,渲染包含数千甚至上万条数据的列表是常见需求,这篇文章主要介绍了React自定义Hook之如何优雅管理复杂列表筛选状态的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2026-05-05
  • React中的useState如何改变值不重新渲染的问题

    React中的useState如何改变值不重新渲染的问题

    这篇文章主要介绍了React中的useState如何改变值不重新渲染的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react使用.env文件管理全局变量的方法

    react使用.env文件管理全局变量的方法

    本文主要介绍了react使用.env文件管理全局变量的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 在React中使用Antd上传并读取Excel文件的详细步骤

    在React中使用Antd上传并读取Excel文件的详细步骤

    在React中使用Antd组件库来上传并读取Excel文件,可以结合antd的Upload组件和xlsx库来实现,以下是一个详细的步骤和示例代码,展示如何在React应用中实现这一功能,感兴趣的小伙伴跟着小编一起来看看吧
    2025-01-01
  • React18 中的 Suspense API使用实例详解

    React18 中的 Suspense API使用实例详解

    这篇文章主要为大家介绍了React18 中的 Suspense API使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JavaScript的React框架中的JSX语法学习入门教程

    JavaScript的React框架中的JSX语法学习入门教程

    这篇文章主要介绍了JavaScript的React框架中的JSX语法学习入门教程,React是由Facebook开发并开源的高人气js框架,需要的朋友可以参考下
    2016-03-03
  • React中的setState使用细节和原理解析(最新推荐)

    React中的setState使用细节和原理解析(最新推荐)

    这篇文章主要介绍了React中的setState使用细节和原理解析(最新推荐),前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍,需要的朋友可以参考下
    2022-12-12

最新评论