怎么开场对我来说一个是个很纠结的问题,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: jsCodeLocation
moduleName: @"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. [React Router] Prevent Navigation with the React Router Prompt Component

    In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a s ...

  2. React Native中pointerEvent属性

    在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...

  3. React Native知识11-Props(属性)与State(状态)

    一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过 ...

  4. Spring Cloud Config 配置属性覆盖优先级。

    /** * Flag to indicate that the external properties should override system properties. * Default tru ...

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

    ts和react的默认属性的四种解决方案 Non-null assertion operator(非空断言语句) Component type casting(组件类型重置) High order f ...

  6. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  7. React中的三大属性

    一.前言: 属性1:state 属性2:props 属性3:ref 与事件处理 二.主要内容: 属性1:state 1,认识: 1) state 是组件对象中最重要的属性,值是一个对象(可以包含多个数 ...

  8. Java基础之子类父类属性覆盖

    当java的子类和父类具有相同名字的属性时,到底java是怎么处理的. 先看代码: package com.joyfulmath.study.field; public class Person { ...

  9. React(JSX语法)-----JSX属性

    1. if you know all the propertities that you want to place on a component ahead of time,it is easy t ...

随机推荐

  1. [转]Winform开发框架的重要特性总结

    本文转自:https://www.cnblogs.com/wuhuacong/p/3199829.html 从事Winform开发框架的研究和推广,也做了有几个年头了,从最初的项目雏形到目前各种重要特 ...

  2. JavaScript学习总结(四)——this、原型链、javascript面向对象

    一.this 在JavaScript中this表示:谁调用当前函数this就指向谁,不知道调用者时this指向window. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是 ...

  3. vscode 自动提示Threejs

    转自:https://blog.csdn.net/github_39125824/article/details/82633993 1.首先,你要安装Node.js 2.在vscode的 查看-> ...

  4. [日常] Go语言圣经--结构体,JSON习题

    Go语言圣经-结构体 1.结构体是一种聚合的数据类型,是由零个或多个任意类型的值聚合成的实体 2.通常一行对应一个结构体成员,成员的名字在前类型在后,不过如果相邻的成员类型如果相同的话可以被合并到一行 ...

  5. [android] 轮播图-滑动图片标题焦点

    谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域 在布局文件中,布置标题描述部分 ...

  6. Safe Or Unsafe(hdu2527)哈弗曼VS优先队列

    Safe Or Unsafe Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  7. PostgreSQL可视化客户端工具

    TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL,MSSQL, Hive, SAP ...

  8. Java反射的好处

    反射的好处 我们在第一次接触反射的时候,总会有个很大的疑问,反射看起来好麻烦啊,各种get.get,他究竟有什么好处,能用来做什么呢? 我们先来看一下<编程思想>这本书中是怎么说的. RT ...

  9. java设计模式-----23、命令模式

    概念: Command模式也叫命令模式 ,是行为设计模式的一种.Command模式通过被称为Command的类封装了对目标对象的调用行为以及调用参数. 命令模式(Command Pattern)是一种 ...

  10. 从零开始学习html(十)CSS格式化排版——下

    六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...