1.React Native起步和思考

2019-11-09 13:47:46

字體：大中小

來源：轉載

供稿：網友

好久沒有寫博客，一直在用自己的印象筆記記錄一些問題。2017年了，想重新的把博客寫起來。也希望通過這個平臺交一些朋友。

環境配置

Homebrew:mac上的包管理。可以用來安裝nvm,watchman等等。nvm:Node Version Manager(Node.js的版本管理器)，對電腦上多個不同node.js版本方便管理。watchman:用來監聽文件的修改。Facebook推薦。node:目前理解是一項服務器技術，還有主要是為了下面的npm(有待再次理解)。npm:管理javascript包。比如可以用來安裝react-native。react-native-cli:React Native的命令行工具。

具體的安裝就沒寫，官網以及很多文章都有講，安裝完以后就是下面這樣的。

Egos-MacBook-PRo:Users Egos$ react-native -versionreact-native-cli: 2.0.1react-native: n/a - not inside a React Native project directory

基本指令

介紹幾個需要基本掌握的指令，對于熟悉的同學就跳過了。

nvm list // 查看所有安裝的node版本信息。nvm alias default v7.4.0 // 設置默認的node版本(這里設置成了7.4.0)，可能有些版本有些兼容性的問題。nvm ls-remote // 查看更新了的node的版本(可能需要翻墻)nvm install v7.4.0 // 安裝node // 全局安裝react-native命令行工具npm uninstall -g react-native-cli // 先卸載再安裝npm install -g react-native-cli // 可以用一些react-native命令,比如react-native --helpnpm info react-native // 查看某個模塊最新發布版本信息(這里查看react-native發布的版本信息)npm install --save react-native@0.41.1 // 升級或者降級react-native的版本并且更新package.json，需要用在react-native項目目錄下react-native --help // 查看react-native的幫助信息react-native start // 開啟服務react-native run-android // 運行Android

初體驗

主要說明一下每個文件代表的意思，Trinea大大的這篇的文章React Native 你該了解的 Hello World很詳細了。

react-native init HeloWorld // 初始化一個react-natvie項目,網絡原因可能導致比較的慢react-native run-android // 運行到Android手機。android/ios文件夾中存儲的是各自平臺的代碼。到這里以后是可以直接在Android Studio打開android包下面的android項目運行的。index.android.js和index.ios.js分別是Android和IOS的入口。理解為Java的main函數或者Android的LAUNCHER。__tests__ 測試文件夾。package.json，跟Node工程類似，用于描述項目的基本信息以及需要的依賴信息。node_modules文件夾，自動生成的文件夾，存放package.json中的。.watchmanconfig 為 watchman 的配置文件，watchman 用于監控文件變化，輔助實現工程修改所見即所得。.flowconfig 為 flow 的配置文件，flow 用于代碼靜態檢查。.buckconfig 為 buck 的配置文件，buck 是 Facebook 開源的高效編譯系統，對 Android iOS 同時適用，通過復用未修改的代碼單元、增量編譯等提高編譯效率。

運行流程分析

react-native run-android 以后到底是干了什么？

Egos-MacBook-Pro:HelloWorld Egos$ react-native run-androidJS server already running. // server啟動，會打開另外一個terimal窗口Running /Users/Egos/Library/Android/sdk/platform-tools/adb -s FA54AYJ05343 reverse tcp:8081 tcp:8081 // 反向代理8081端口Building and installing the app on the device (cd android && ./gradlew installDebug)... // android的gradle命令打包apk并且安裝apk// 執行完打包命令以后Starting the app on FA54AYJ05343 (/Users/Egos/Library/Android/sdk/platform-tools/adb -s FA54AYJ05343 shell am start -n com.helloworld/.MainActivity).. // 打開MainActivity// 現在另外一個terimal窗口transformed 388/388 (100%) // 將文件傳到手機上// 到此手機就展示出來了

更新React代碼以后重新reload的操作，可以看出是將代碼重新transforme到手機上。

<START> Updating existing bundle outdated_modules: 1<START> Transforming files<END> Transforming files (1ms)<END> Updating existing bundle (232ms) outdated_modules: 1Requesting bundle (256ms) bundle_url: /index.android.bundle?platform=android&dev=true&hot=false&minify=false

不更新代碼reload的操作。沒有transforme操作。

<START> Requesting bundle bundle_url:/index.android.bundle?platform=android&dev=true&hot=false&minify=falseRequesting bundle (16ms)bundle_url:/index.android.bundle?platform=android&dev=true&hot=false&minify=false

打包

沒有嘗試使用React Native自帶的打包，使用gradle打包。與普通項目的打包方式是一樣的，如果不知道的話，可以自行搜索解決。

signingConfigs { // 配置release variants打包內容 release { keyAlias signConfig.get('key.alias') keyPassWord signConfig.get('key.alias.password') storePassword signConfig.get('key.store.password') storeFile file(signConfig.get('key.store')) }}buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" signingConfig signingConfigs.release // 配置打包release的時候使用signingConfigs中的release配置 }}

一些疑問

只支持com.android.tools.build:gradle:1.3.1？這個問題肯定是錯誤的。每次init一個項目的時候都是1.3.1，覺得很奇怪，是可以修改的。只能在命令行里面run?肯定不是。可以用相應的Android Studio/Xcode打開android/ios的項目運行。反編譯得到的代碼不能看出來是不是正確的？反編譯一個React Native app以后看不到與運行出來內容相關的東西，那么react之類的代碼去哪了呢，目前這個問題還沒有代碼，知道的可以恢復下。^-^React Native和React Native Cli有什么區別？React Native Cli是為React Native提供命令行的一個腳本(這里的理解可能有一些出入)。比如run-android就會在里面封裝好，然后就可以react-native run-android了。包沖突，例如v4包？可以exclude掉。

還有一些問題，運行錯誤，錯誤不展示，怎么更改入口js的名字等等都可以自行搜索出來，可能我碰到的也不一樣。還有一些比如加速transforme的操作，自己還沒有去實踐。

體會

Learn once, write anywhere. 自己也在ios的模擬器上面跑了一下，也是很方便的。確實可以做到一份代碼就完成了android和ios兩個平臺開發。但是android和ios界面也是有很多不一樣的體驗，當然代碼也是可以做到在兩個平臺的ui分別展示不同的樣式。但對于一個已經比較完善的代碼直接改成React Native來說成本還是比較大的，目前看來可能會在已有的項目中集成React Native。

參考： Facebook官方資料 React Native: 配置和起步 React Native: Android 的打包

上一篇：app store無法下載、安裝軟件，一直在轉圈的一個解決方法

下一篇：Tango 開發者概述