initialProps被React-Navigation的navigation屬性覆蓋解決方案

怎麼開場對我來講一個是個很糾結的問題,Emmm這應該算個好開場。
最近在作一個RN的app端調試工具,在把它嵌入原生app中的時候遇到了一個問題,RN組件裏面接受不到原生傳過來的initialProps?!javascript


先po一下問題緣由和答案,看官們有興趣的話能夠再看看下面的廢話。
問題緣由:首先看下咱們通常怎麼寫,java

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

AppRegistry.registerComponent(appName, () => AppWithDebug);

通常狀況下,咱們會把createStackNavigator生成的對象,做爲AppRegistry.registerComponent的入口文件,這個時候react-navigation在接收到initialProps以後並不會向下傳遞,而是隻向下傳遞自身的navigation對象內容所以這個時候咱們在組件中就拿不到原生傳過來的initialProps內容了。
解決方案:隔離入口,再也不使用createStackNavigator的結果去做爲AppRegistry.registerComponent的入口,如react

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的相關內容。
~~問題解決~~如下是爬坑過程~~git


碰到這個問題第一反應,什麼鬼?官方文檔是這麼介紹的啊,github

這裏的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獲取正常。。。app

這個時候就準備在本身的項目上開始各類騷操做嘗試一下,可是沒等我大展拳腳就發現本身可能掉進react-navigation的坑裏了,由於最開始去獲取initialProps的時候打印了一下this.props對象,發現只有navigation一個子屬性,因而就把導航去掉試了一下發現initialProps的屬性竟然就蹦出來了,這個時候基本就能夠肯定問題出在react-navigation上了。
這個時候去react-navigation的github官網上查一下issue,就發現了這個

看樣子樓主遇到了同樣的問題,而且真的是一步一步的證實了react-navigation在這個上面的bug,但第一次看了一圈沒找到答案,直到第二次才找到答案

看到這裏,真的是恍然大悟,你應該也明白了吧~其實就是隔離入口工具

常常看到結論,會恍然大悟「哦 原來就這樣啊 這麼簡單」。
其實不少時候答案並不複雜,咱們所或缺的是思考問題的方法,之因此寫答案下面的這些」廢話「,也是最近特別煩躁,常常會被問題卡住而且變得更煩躁,想給本身提個醒,讓本身靜一靜。
目前的開發工做,除非是原創性的工做,通常狀況下你遇到的問題都是別人遇到過的,只要去找,可能會很長時間,但終歸仍是能夠解決的,github的issue是個找答案的好地方,耐心尋找。
煩躁並不能解決問題,只會擾亂你的思路,因此不要被情緒左右你的理智。
~加油 你是最胖的~this

相關文章
相關標籤/搜索