前言 :從前端的發展歷程上看,從切圖仔到全端,註定有舍有得,邊界會越來越大,技術會越來越豐富,貫穿瀏覽器、服務端和移動端多元化發展趨勢。花了壹天時間糾結用HTML5+和RN來開發安卓ios雙端,考慮穩定性選擇用RN,做好被虐上整整壹個月的心理準備,開發過程中事實也確實如此,坑多慎入。
另外建議當決定要用RN重構應用或者基於RN開發時,盡量提前梳理業務文檔,有條件先組預研發小組,去研究業務實現的可能性,比如說集成外部的sdk,切記原生部分最好要求配合安卓ios朋友壹起合作,否則會很難受。
從技術角度,入坑先從vue跳到react,再入react-native。此文章主要記錄項目開發中填坑過程。
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
接著在項目目錄下,命令行服務端口 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)
真機:手機搖壹搖,或者左鍵長按
根據項目需要可選擇安裝依賴插件,示例項目依賴
依賴安裝方法:
yarn install //安裝全部依賴
yarn add 依賴名 //安裝單個依賴
yarn add 依賴名@版本號 //安裝依賴某個版本
yarn remove 依賴名 //刪除依賴 ,刪除依賴後,需要把安卓ios原生文件中刪除依賴
需要依賴原生庫
react-native link 依賴內壹次性全部鏈接
react-native link 依賴名 鏈接某壹個庫
假設,根據項目需要修改了依賴包源碼,在項目根目錄復制修改源碼的包,
在pagejson.json文件修改文件安裝路徑。