前言：從前端的發展歷程上看，從切圖仔到全端，注定有舍有得，邊界會越來越大，技術會越來越豐富，貫穿瀏覽器、服務端和移動端多元化發展趨勢。花了一天時間糾結用HTML5+和RN來開發安卓ios雙端，考慮穩定性選擇用RN，做好被虐上整整一個月的心理準備，開發過程中事實也確實如此，坑多慎入。
另外建議當決定要用RN重構應用或者基于RN開發時，盡量提前梳理業務文檔，有條件先組預研發小組，去研究業務實現的可能性，比如說集成外部的sdk，切記原生部分最好要求配合安卓ios朋友一起合作，否則會很難受。
從技術角度，入坑先從vue跳到react，再入react-native。此文章主要記錄項目開發中填坑過程。
RN開發環境
- 安卓開發環境
https://reactnative.cn/docs/getting-started/
安裝的依賴有：Node 10+，JDK1.8 ，python 2.7，yarn（代替npm），Android Studio（安卓開發工具）用于模擬器打開項目 - ios開發環境
安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 Xcode。
創建項目
react-native init 項目名
tip:react-native 版本更新較快，init默認是最新版本的react-native，目前最新發布版本0.60.0版本（更新修復，支持androidX，完全刪除了WebView，Geolocation...），也可根據需要創建指定版本RN：
react-native init 項目名 --version 0.59.9
進入項目目錄查看react-native版本 ：react-native -V
在設備中啟動項目
-
安卓設備
模擬器啟動：Android studio中打開項目中android文件夾，點擊操作欄圖標（類似手機），先創建自己的模擬器
15402667-006bf76a3ad7e346_副本.png
接著在項目目錄下，命令行服務端口react-native start
點擊啟動按鈕，選擇模擬器就可啟動項目
真機啟動：用usb連接電腦和手機（手機必須在開發者選項下，打開usb調試模式，否則啟動會報錯），在項目目錄下，命令行啟動：
react-native run-android
App安裝完成，node窗口進度條走完即可在手機上運行RN項目。
模擬器與真機開發者菜單主要用到：Reload （重載），Debug JS Remotely(Debug 調試模式，可在瀏覽器中console.log輸出)，Enable Hot Reloading(熱更新)；
開發者菜單打開方式：
模擬器：ctrl+m ， r+r(為reload)
真機：手機搖一搖，或者左鍵長按
- ios設備
xcode打開ios目錄下***.xcodeproj，左上角選擇模擬器類型，點擊運行，即可在模擬器中運行RN應用，另外在外部設備運行需要開發者賬號。
RN項目依賴
根據項目需要可選擇安裝依賴插件，示例項目依賴
"@react-native-community/async-storage": "^1.4.2", //本地存儲
"@react-native-community/netinfo": "^3.2.1",//斷網處理
"@react-native-community/viewpager": "^1.1.7",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-baidu-map": "1.0.2",//百度地圖
"react-native-camera": "^2.10.2",//攝像頭掃碼功能
"react-native-easy-toast": "^1.2.0",//toast 輕提示
"react-native-fit-image": "^1.5.4",//自動適應圖片
"react-native-flexi-radio-button": "^0.2.2",//radio
"react-native-gesture-handler": "^1.3.0",//手勢
"react-native-image-picker": "^0.28.1",//上傳圖片
"react-native-linear-gradient": "^2.5.4",//漸變顏色
"react-native-modal": "^11.0.1",//modal彈窗
"react-native-modal-dropdown": "^0.6.2",//下拉彈框
"react-native-permissions": "^1.1.1",//權限
"react-native-qrcode-svg": "^5.1.2",//二維碼
"react-native-render-html": "^4.1.2",//html內容渲染
"react-native-scrollable-tab-view": "^0.10.0",//tab切換效果
"react-native-splash-screen": "^3.2.0",//啟動屏
"react-native-svg": "^9.5.1", //圖形支持
"react-native-swiper": "^1.5.14",//輪播
"react-native-textarea": "^1.0.3", //多行輸入
"react-native-vector-icons": "^6.5.0",//圖標庫
"react-native-webview": "^5.12.1",//webview
"react-navigation": "^3.11.0",//導航
"react-navigation-redux-helpers": "^3.0.2", //集成redux必須集成此庫
"react-redux": "^7.1.0", //react官方提供的 React 綁定庫
"redux": "^4.0.1"http://JavaScript 狀態容器，提供可預測化的狀態管理
依賴安裝方法：
yarn install //安裝全部依賴
yarn add 依賴名 //安裝單個依賴
yarn add 依賴名@版本號 //安裝依賴某個版本
yarn remove 依賴名 //刪除依賴 ，刪除依賴后，需要把安卓ios原生文件中刪除依賴
需要依賴原生庫
react-native link 依賴內一次性全部鏈接
react-native link 依賴名 鏈接某一個庫
假設，根據項目需要修改了依賴包源碼，在項目根目錄復制修改源碼的包，
在pagejson.json文件修改文件安裝路徑。
