怎么开场对我来说一个是个很纠结的问题,Emmm这应该算个好开场。
最近在做一个RN的app端调试工具,在把它嵌入原生app中的时候遇到了一个问题,RN组件里面接受不到原生传过来的initialProps?!


先po一下问题原因和答案,看官们有兴趣的话可以再看看下面的废话。
问题原因:首先看下我们一般怎么写,

const AppWithDebug = createStackNavigator({Home: {screen: App},...debugRoute
});AppRegistry.registerComponent(appName, () => AppWithDebug);

一般情况下,我们会把createStackNavigator生成的对象,作为AppRegistry.registerComponent的入口文件,这个时候react-navigation在接收到initialProps之后并不会向下传递,而是只向下传递自身的navigation对象内容因此这个时候我们在组件中就拿不到原生传过来的initialProps内容了。
解决方案:隔离入口,不再使用createStackNavigator的结果去作为AppRegistry.registerComponent的入口,如

const AppWithDebug = createStackNavigator({Home: {screen: App},...debugRoute
});class AppEntry extends Component {render() {return <AppWithDebug screenProps={ this.props }/>}
};AppRegistry.registerComponent(appName, () => AppEntry);

react-navigation不再处于项目入口的位置,入口处由一个包含了导航组件的组件代替。此时我们在AppEntry组件中就可以直接通过this.props拿到initialProps的值了,再通过screenProps向下传递即可,AppWithDebug中可以通过this.props.screenProps获取initialProps的相关内容。
~~问题解决~~以下是爬坑过程~~


碰到这个问题第一反应,什么鬼?官方文档是这么介绍的啊,

这里的initialProperties注入了一些演示用的数据。在 React Native 的根组件中,我们可以使用this.props来获取到这些数据。--RN中文网

RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocationmoduleName: @"RNHighScores"
initialProperties:@{@"scores" : @[@{@"name" : @"Alex",@"value": @"42"},@{@"name" : @"Joel",@"value": @"10"}]}launchOptions: nil];
注:请忽略我的强行缩进,节省点大家横向拖动的时间

文档写的明明白白,难道我是个傻子?你传过来,我直接this.props.xxx,一点毛病没有啊,为啥拿不到?在去原生同学那里一看他们的demo获取正常。。。

这个时候就准备在自己的项目上开始各种骚操作尝试一下,但是没等我大展拳脚就发现自己可能掉进react-navigation的坑里了,因为最开始去获取initialProps的时候打印了一下this.props对象,发现只有navigation一个子属性,于是就把导航去掉试了一下发现initialProps的属性居然就蹦出来了,这个时候基本就可以确定问题出在react-navigation上了。
这个时候去react-navigation的github官网上查一下issue,就发现了这个

看样子楼主遇到了一样的问题,并且真的是一步一步的证明了react-navigation在这个上面的bug,但第一次看了一圈没找到答案,直到第二次才找到答案

看到这里,真的是恍然大悟,你应该也明白了吧~其实就是隔离入口

经常看到结论,会恍然大悟“哦 原来就这样啊 这么简单”。
其实很多时候答案并不复杂,我们所或缺的是思考问题的方法,之所以写答案下面的这些”废话“,也是最近特别烦躁,经常会被问题卡住并且变得更烦躁,想给自己提个醒,让自己静一静。
目前的开发工作,除非是原创性的工作,一般情况下你遇到的问题都是别人遇到过的,只要去找,可能会很长时间,但终归还是可以解决的,github的issue是个找答案的好地方,耐心寻找。
烦躁并不能解决问题,只会扰乱你的思路,所以不要被情绪左右你的理智。
~加油 你是最胖的~

initialProps被React-Navigation的navigation属性覆盖解决方案相关推荐

  1. TypeScript 3.0下react默认属性DefaultProps解决方案

    TypeScript 3.0下react默认属性DefaultProps解决方案 参考文章: (1)TypeScript 3.0下react默认属性DefaultProps解决方案 (2)https: ...

  2. 【Kotlin】Kotlin 类的继承 二 ( 属性覆盖 | 属性覆盖的四种情况 | 常量 / 变量 属性覆盖 | 子类初始化与属性覆盖 )

    文章目录 I . 属性覆盖基本方式 II . 属性覆盖的四种情况 III . 常量 ( val ) / 变量 ( var ) 属性覆盖 IV . 子类初始化时考虑覆盖属性的使用 I . 属性覆盖基本方 ...

  3. [react] 如果组件的属性没有传值,那么它的默认值是什么?

    [react] 如果组件的属性没有传值,那么它的默认值是什么? 如果某一个prop并没有初始化值,那么在没有设置默认值的情况下,是会直接返回undefined的,如果有默认值,那么就会返回默认值 个人 ...

  4. [react] 除了实例的属性可以获取Context外哪些地方还能直接获取Context呢?

    [react] 除了实例的属性可以获取Context外哪些地方还能直接获取Context呢? Context = React.createContext <Context.Provider va ...

  5. 学习React第三篇:在React组件上设置属性(PropTypes)

    继编写 使用组件的render方法在React中显示输出 接下来,在React组件上设置属性: 那我们如何在React中传递数据的方式. 我们将了解一下React中的propTypes和default ...

  6. babel 插件为react元素自动添加属性

    原文链接: babel 插件为react元素自动添加属性 上一篇: clip-path 绘制css常见图形 制作有趣的动画 下一篇: js 生成器 协程 参考 https://www.imliyan. ...

  7. React中的“计算属性”

    React中的"计算属性" 相信许多学习过vue的小伙伴对计算属性都不陌生吧.计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖 ...

  8. React中跨域问题的完美解决方案

    React中跨域问题的完美解决方案 参考文章: (1)React中跨域问题的完美解决方案 (2)https://www.cnblogs.com/piaobodewu/p/10034440.html 备 ...

  9. React项目中跨域问题的解决方案

    React项目中跨域问题的解决方案 参考文章: (1)React项目中跨域问题的解决方案 (2)https://www.cnblogs.com/Kailey/p/9199518.html 备忘一下.

最新文章

  1. mysql 普通索引和唯一索引_MySQL 普通索引和唯一索引的区别
  2. Java CPU占用率高分析
  3. BZOJ 5330 Luogu P4607 [SDOI2018]反回文串 (莫比乌斯反演、Pollard Rho算法)
  4. 输入输出系统 2--- 中断(未完)
  5. 微软在 Build 2020 上“展示”新版 Edge for Linux
  6. UBNT Bullet M2说明书
  7. RC延时电路计算方法
  8. 方舟单机/管理员生物指令代码大全
  9. 学习Java需要掌握哪些知识,初学者必备
  10. 浅谈FPGA,SoC,ASIC
  11. 海洋地震设备与采集的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  12. 火影忍者里的忍术日文发音
  13. C# 城市路网地图生成与运动模拟(一)-数据的获取
  14. Mac提升效率软件集锦
  15. it企业实习_IT企业实习心得体会范文
  16. ROS2原始数据类型与接口
  17. ncut matlab,matlab call Ncut: Matrix is too large to convert to linear index.
  18. 状态机控制移位寄存器multisim仿真过程中出现的状态变量和状态转移条件不匹配的问题
  19. Windows下SVN服务器和客户端的下载和安装
  20. 计算机设备机房防静电标准,电子计算机机房防静电解决方案

热门文章

  1. Vue.js 状态管理
  2. 你不知道的JavaScript错误和调用栈常识
  3. Java反射在JVM的实现
  4. MIT自然语言处理第三讲:概率语言模型(第一、二、三部分)
  5. 编程之美-子数组之和的最大值(二维)方法整理
  6. 获取指定目录下的所有文件名
  7. cassandra集群搭建
  8. Windows远程Linux/Ubuntu桌面
  9. 世界地板大会姚红鹏的三问
  10. 《淘宝网开店 进货 运营 管理 客服 实战200招》——2.3 开店需要掌握哪些 进货技巧...