怎么開場(chǎng)對(duì)我來說一個(gè)是個(gè)很糾結(jié)的問題，Emmm這應(yīng)該算個(gè)好開場(chǎng)。
最近在做一個(gè)RN的app端調(diào)試工具，在把它嵌入原生app中的時(shí)候遇到了一個(gè)問題，RN組件里面接受不到原生傳過來的initialProps？！

---

先po一下問題原因和答案，看官們有興趣的話可以再看看下面的廢話。
問題原因：首先看下我們一般怎么寫，

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

一般情況下，我們會(huì)把createStackNavigator生成的對(duì)象，作為AppRegistry.registerComponent的入口文件，這個(gè)時(shí)候react-navigation在接收到initialProps之后并不會(huì)向下傳遞，而是只向下傳遞自身的navigation對(duì)象內(nèi)容因此這個(gè)時(shí)候我們?cè)诮M件中就拿不到原生傳過來的initialProps內(nèi)容了。
解決方案：隔離入口，不再使用createStackNavigator的結(jié)果去作為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不再處于項(xiàng)目入口的位置，入口處由一個(gè)包含了導(dǎo)航組件的組件代替。此時(shí)我們?cè)贏ppEntry組件中就可以直接通過this.props拿到initialProps的值了，再通過screenProps向下傳遞即可，AppWithDebug中可以通過this.props.screenProps獲取initialProps的相關(guān)內(nèi)容。
～～問題解決～～以下是爬坑過程～～

---

碰到這個(gè)問題第一反應(yīng)，什么鬼？官方文檔是這么介紹的啊，

這里的initialProperties注入了一些演示用的數(shù)據(jù)。在 React Native 的根組件中，我們可以使用this.props來獲取到這些數(shù)據(jù)。--RN中文網(wǎng) RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocationmoduleName: @"RNHighScores" initialProperties:@{@"scores" : @[@{@"name" : @"Alex",@"value": @"42"},@{@"name" : @"Joel",@"value": @"10"}]}launchOptions: nil]; 注：請(qǐng)忽略我的強(qiáng)行縮進(jìn)，節(jié)省點(diǎn)大家橫向拖動(dòng)的時(shí)間

文檔寫的明明白白，難道我是個(gè)傻子？你傳過來，我直接this.props.xxx，一點(diǎn)毛病沒有啊，為啥拿不到？在去原生同學(xué)那里一看他們的demo獲取正常。。。

這個(gè)時(shí)候就準(zhǔn)備在自己的項(xiàng)目上開始各種騷操作嘗試一下，但是沒等我大展拳腳就發(fā)現(xiàn)自己可能掉進(jìn)react-navigation的坑里了，因?yàn)樽铋_始去獲取initialProps的時(shí)候打印了一下this.props對(duì)象，發(fā)現(xiàn)只有navigation一個(gè)子屬性，于是就把導(dǎo)航去掉試了一下發(fā)現(xiàn)initialProps的屬性居然就蹦出來了，這個(gè)時(shí)候基本就可以確定問題出在react-navigation上了。
這個(gè)時(shí)候去react-navigation的github官網(wǎng)上查一下issue，就發(fā)現(xiàn)了這個(gè)

看樣子樓主遇到了一樣的問題，并且真的是一步一步的證明了react-navigation在這個(gè)上面的bug，但第一次看了一圈沒找到答案，直到第二次才找到答案

看到這里，真的是恍然大悟，你應(yīng)該也明白了吧～其實(shí)就是隔離入口

經(jīng)常看到結(jié)論，會(huì)恍然大悟“哦 原來就這樣啊 這么簡(jiǎn)單”。
其實(shí)很多時(shí)候答案并不復(fù)雜，我們所或缺的是思考問題的方法，之所以寫答案下面的這些”廢話“，也是最近特別煩躁，經(jīng)常會(huì)被問題卡住并且變得更煩躁，想給自己提個(gè)醒，讓自己靜一靜。
目前的開發(fā)工作，除非是原創(chuàng)性的工作，一般情況下你遇到的問題都是別人遇到過的，只要去找，可能會(huì)很長(zhǎng)時(shí)間，但終歸還是可以解決的，github的issue是個(gè)找答案的好地方，耐心尋找。
煩躁并不能解決問題，只會(huì)擾亂你的思路，所以不要被情緒左右你的理智。
～加油 你是最胖的～

總結(jié)

以上是生活随笔為你收集整理的initialProps被React-Navigation的navigation属性覆盖解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。