在不長的時間裡面，我們通過rn和mobx構建了一個便籤應用, 這期間的開發和除錯我們是使用crna的命令通過expo這個容器工具來完成的。同樣它也幫助我們更少的面對關於環境配置的問題。

但是，我們最終開發的目標還是會生成兩個端的native app(ipa+apk)，所以我們嘗試通過最基本的命令去構建我們的程式（仍然使用之前的程式碼）；下面我把這個過程中遇到的問題做一個記錄.

expo下的babelrc：

{ "presets": ["babel-preset-expo"], "env": { "development": { "plugins": ["transform-react-jsx-source"] } }}

這裡的配置是crna命令自動生成的。

package.json:

{ "name": "NoteAppNew", "version": "0.1.0", "private": true, "devDependencies": { "react-native-scripts": "1.8.1", "jest-expo": "23.0.0", "react-test-renderer": "16.0.0" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js --watch" }, "jest": { "preset": "jest-expo" }, "dependencies": { "expo": "^23.0.4", "mobx": "^3.4.1", "mobx-react": "^4.3.5", "react": "16.0.0", "react-native": "0.50.3", "react-native-elements": "^0.18.5", "react-navigation": "^1.0.0-beta.21" }}

這裡的一些依賴是後面安裝時加進去的，需要注意的是vector-icons這個庫是expo預設支援的，但我們後面注意到這是一個需要native支援的庫，所以在npm install後需要手動link才可以工作，否則會編譯報錯。

我們後建立的app：

{ "name": "NoteRNative", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "mobx": "^3.4.1", "mobx-react": "^4.3.5", "react": "16.0.0", "react-native": "0.51.0", "react-native-elements": "^0.18.5", "react-native-vector-icons": "^4.4.3", "react-navigation": "^1.0.0-beta.22" }, "devDependencies": { "babel-jest": "22.0.3", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-react-native": "4.0.0", "jest": "22.0.3", "react-test-renderer": "16.0.0" }, "jest": { "preset": "react-native" }}

這裡因為我們使用了mobx的裝飾器語法（既然已經使用了mobx，那麼自然就要用裝飾器了，高大上，不解釋），在新版本expo下我們基本上沒有遇到什麼障礙（僅僅是設定了vs code的檢查，啟用了裝飾器的配置，這樣vs code不會報錯, 和執行無關）,但是我們使用原始命令去執行則遇到了不少的障礙。

經過實踐我們發現，mobx官網的設定推薦是不合適的。建議大家只要安裝babel-plugin-transform-decorators-legacy這個plugin就可以，然後修改babelrc的配置把這個plugin用起來：

{"presets":["react-native"],"plugins":["transform-decorators-legacy"]}

這個外掛也是要通過npm 來安裝的；再裝上其他所有的依賴. 注意：對於涉及到原生程式碼的外掛，我們需要執行react-native link 。

babelrc外掛是不可見的，可以使用touch .babelrc建立，通過open .babelrc來訪問。

外掛和babel都安裝配置完成以後，使用npm start啟動node伺服器，然後再使用react-native run-ios (或者android)來執行就可以了。

對於native工程：

現在的rn工程配置相關也做了很多改良，比如ios和android的入口js現在只有一個了，另外對於bundle的生成我們只需要改變工程配置（debug/release）就可以達到我們的目的，在release下面我們會自動的把bundle打進去而不會依賴於node伺服器；在debug下也有個prelease的東西可以供你使用靜態的bundle，不得不說比最早之前人性化了很多。

PS：原生下面更換修改launch圖時候需要刪除掉手機先前裝的app重新安裝，覆蓋安裝看不到效果。icon圖示放到原生工程內。

目前就先記錄這麼多，我們的app已經放到fir上下載了，release出來的包8.4m，可以接受。