initialProps被React-Navigation的navigation属性覆盖解决方案
怎么開場對我來說一個是個很糾結的問題,Emmm這應該算個好開場。
最近在做一個RN的app端調試工具,在把它嵌入原生app中的時候遇到了一個問題,RN組件里面接受不到原生傳過來的initialProps?!
先po一下問題原因和答案,看官們有興趣的話可以再看看下面的廢話。
問題原因:首先看下我們一般怎么寫,
一般情況下,我們會把createStackNavigator生成的對象,作為AppRegistry.registerComponent的入口文件,這個時候react-navigation在接收到initialProps之后并不會向下傳遞,而是只向下傳遞自身的navigation對象內容因此這個時候我們在組件中就拿不到原生傳過來的initialProps內容了。
解決方案:隔離入口,不再使用createStackNavigator的結果去作為AppRegistry.registerComponent的入口,如
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属性覆盖解决方案的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: spring boot数据库操作汇总
- 下一篇: dubbo Trace 日志追踪