React Native babel編譯異常問題

最近以React Native技術開發App應用，搭建項目時遇到坑頗多，網上查找解決方法費時，費精力，總結一些問題，但願能對讀者有所幫助。

個人我的博客

此次碰見的問題是babel編譯ES6源碼時，拋出的異常，致使沒法啓動項目，執行react-native run-ios，啓動模擬器後報錯：

能夠看到，有用的信息：Error bundling Cannot find module @babel/core，而使用react-native-cli建立的React Native App應用使用的是babel預設方案：babel-preset-react-native，這是它的最新版本的一個bug，咱們能夠將其版本退回至2.1.0，首先刪除它（使用yarn或npm進行安裝包管理皆可）：

yarn remove babel-preset-react-native
or
npm unstall babel-preset-react-native
複製代碼

而後安裝指定版本：

yarn add --dev babel-preset-react-native@2.1.0
or
npm install --save-dev babel-preset-react-native@2.1.0
複製代碼

最後，再次啓動應用：

react-native run-ios
or 
react-native run-android
複製代碼

應用正常運行。

React Native 版本問題

固然也許你還會遇到一個異常：

這個問題是因爲最新React Native版本，須要Xcode版本大於9，Mac OS大於11，因此能夠將React Native版本將至0.53.3：

react-native init myApp --version 0.53.3
複製代碼

Babel preset版本問題

前面對於babel編譯問題，指出將版本回降至2.1.0，正常是沒有問題的，可是若是使用了ES6新語法generator時，須要注意，下面這種export導出寫法，將會報錯：

export default function * root () {
  yield ...
}
複製代碼

須要改爲以下導出方式，先賦值再導出：

const root = function * root () {
  yield ...
}
export default root;
複製代碼

固然，若是不但願修改代碼，則須要將babel-preset-react-native版本降至2.0.0:

rm -rf ./node_modules
yarn cache clean or npm cache clean
yarn add --dev babel-preset-react-native@2.0.0
yarn install
watchman watch-del-all // 若是使用了watchman
複製代碼

而後殺掉上次應用啓動的進程，從新啓動應用，便可正常編譯，運行：

react-native run-ios
複製代碼

能夠參考How to clear the react native packager。