React Native之React Navigation踩坑

　　自動重裝系統以後，已經很長一段時間沒有來寫React Native了，今天空閒之餘，決定從新配置React Native的開發環境，繼續踩坑...

　　React Native的開發環境配置狠簡單，只要依照網上給出的步驟，複製粘貼，在終端下操做就行。

　　React Native中文網開發環境配置

　　當一切都已完成以後，我懷着激動的心情，打開了Xcode,嘗試運行一下，查看開發環境是否正常。

　　完美~~~一切都是那麼的完美，Welcome to React Native!

　　我真是天才，一次性成功，牛逼吧！！O(∩_∩)O哈哈~，，，（老和尚賣瓜，自賣自詡,O(∩_∩)O哈哈~）

　　閒話很少說，開始記錄記錄此次開發環境配置過程當中遇到的坑。

 

---

　　一、安裝react-navigation時使用的是npm，結果在添加react-native-gesture-handler依賴庫時，出現各類問題，錯誤提示已經找不到了。說下解決辦法:

　　之後若是安裝過程當中出現npm * fix這類的，估計就玄乎了，能夠試下yard來安裝。建立項目是後面跟上—version 0.56.0當前版本號。若是不知道的能夠去react native官網查看。如下四步：按順序操做就行。 react-native init AwesomeProject —-version 0.56 . 0 yarn add react - navigatio yarn add react -native-gesture- handl react -native link

　　二、錯誤提示：Build input file cannot be found: '/Users/***/Desktop/reactnative/AwesomeProject/node_modules/react-native/third-party/double-conversion-1.1.5/src/strtod.cc'

　　解決辦法：

Xcode:」file」->」project setting」->shared Porject settings:build system:’legacy build system

　　三、錯誤提示：bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/objectSpread` from `/Users/***/Desktop/reactnative/AwesomeProject/node_modules/react-navigation-stack/lib/module/views/Header/HeaderBackButton.js`: Module `@babel/runtime/helpers/objectSpread` does not exist in the Haste module map。

　　解決辦法：

yarn add @babel/runtime --dev

 　　四、錯誤提示：react native with error:(SyntaxError:******* Unterminated string constant (21:6)

　　解決辦法：看下是否有輸入錯誤狀況存在，這種狀況，mac終端下通常都會進行標記。

　　五、坑爹描述：修改navigation返回按鈕上的文字不起做用。

　　好比A->B，我在B的頁面上寫如下代碼，沒卵用。

static navigationOptions = {
    headerBackTitle:null,
 };

　　百度了好久也沒有這種問題的解決辦法，最後看文檔，找到了答案，以下：

　　意思是：若是須要修改B上的返回按鈕文字，須要在A中去寫。尼瑪，這種反人類設計，是誰設計的？修改以下：

StackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () => ({
      title: `A`,
      headerBackTitle: null
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () => ({
      title: `B`,
    }),
  }
});