专栏首页码生StackNavigator in react-navigation 传参

StackNavigator in react-navigation 传参

本篇文章主要讲解如何在“导航控制”下的两个界面之间传参数

首先设定场景

A界面: 第一个界面,传参数者 B界面: 第二个界面,接受参数者

A 界面 传参数

注,代码主要是核心代码

const {navigate} = this.props.navigation;
 navigate('BPage', {param1Key: 'param1Value', param2Key: 'param2Value'});

B 界面解析参数

 const { param1Key, param2Key } = this.props.navigation.state.params

升级用法

使用上面的方法即可进行参数传递 但是我建议当想下一个界面传参数时,使用唯一字段标识

const {navigate} = this.props.navigation;
 navigate('BPage',  {outParams : {param1Key: 'param1Value', param2Key: 'param2Value'}});

如此,在 B 界面可以通过

 const { param1Key, param2Key } = this.props.navigation.state.params.outParams
  • 看到 outParam 可以知道从外部传参
  • 防止外部参数与内部参数名称冲突(假如内部也赋值的情况)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

    StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle...

    onety码生
  • React Native commond+r 不起作用 无响应

    onety码生
  • django Authorization token

    原因:没有导入rest authon: 'rest_framework.authtoken', 解决方法:在 settings 里面 INSTALLED_AP...

    onety码生
  • php中this与::概念

    $this 的含义是表示    实例化后的 具体对象! 我们一般是先声明一个类,然后用这个类去实例化对象! 但是,当我们在声明这个类的时候,想在类本身...

    闵开慧
  • 【云架构】云安全和隐私:法律合规与风险管理指南,第2部分

    在这个由两部分组成的系列文章中,法律专家Robert McHale是“数据安全和身份盗窃:影响您的业务的新隐私法规”的作者,它提供了与云计算相关的法律安全和隐私...

    首席架构师智库
  • 【译】数据科学之5个最佳Python库,为初学者定制的教程

    大数据文摘
  • OpenTracing项目

    说明:通过为普遍的平台提供一致的、有表现力的和供应商中立的API,OpenTracing使开发者能够轻松地通过O(1)配置更改添加(或切换)跟踪实现。OpenT...

    CNCF
  • 如何正确使用const(常量),define(宏)

    Scott_Mr
  • 如何正确使用const(常量),define(宏)

    Scott_Mr
  • 这五款工具被全球黑客广泛使用,中国菜刀入榜

    近期,由美国、英国、澳大利亚、加拿大和新西兰的情报机构组成的五眼联盟(Five Eyes)发布了一份报告,该报告针对全球发生的网络安全事件进行研究之后发现有五款...

    FB客服

扫码关注云+社区

领取腾讯云代金券