react-native 簡介及環境

概要

• react native
• 環境搭建
• hello react native
• react native 發布

react native

• https://facebook.github.io/react-native/

優勢

1. 不用再學習 OC，Swift，Java，Kotlin 等
2. 復用 react 開發的種種好處
3. 開發體驗好（即時編譯）
4. 編譯出來的是原生應用，不是 html5 app，也不是 hybrid app
5. 可以方便的和原生代碼寫的控件集成

劣勢

1. 還在發展中，更新頻繁，既有可能存在暗坑
2. 性能調優的方式沒有真正的原生開發多

環境搭建

npm install -g react-native-cli
npm install -g create-react-native-app
npm install -g watchman

hello react native

1. 創建工程

   create-react-native-app sample
   

2. 啟動工程

   cd sample
   yarn start
   

3. 通過 expo 來查看運行結果

發布

android 發布

下載 android 環境

1. 下載 android sdk（如果不用 android studio 開發，可以只下載 sdk 即可）
2. 下載地址：https://developer.android.com/studio/index.html

配置 android 環境

解壓 sdk 到 opt/android

配置 .zshenv / .bashenv

export ANDROID_HOME=/opt/android
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

安裝 platform-tools

cd $ANDROID_HOME
./tools/bin/sdkmanager platform-tools

安裝 build-tools

cd $ANDROID_HOME
./tools/bin/sdkmanager "build-tools;23.0.1"

創建簽名

yarn eject
cd android
keytool -genkey -v -keystore my-app-key.keystore -alias my-app-alias -keyalg RSA -keysize 2048 -validity 10000

創建簽名時，密碼用 123456

配置簽名

1. vim ./android/gradle.properties

   MYAPP_RELEASE_STORE_FILE=my-app-key.keystore
   MYAPP_RELEASE_KEY_ALIAS=my-app-alias
   MYAPP_RELEASE_STORE_PASSWORD=123456
   MYAPP_RELEASE_KEY_PASSWORD=123456
   

   把生成的文件 my-app-key.keystore 放入 android/app 文件夾下

2. vim ./android/app/build.gradle

   android {
       defaultConfig {... ...}
   	  signingConfigs {
             release {
                 if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                     storeFile file(MYAPP_RELEASE_STORE_FILE)
                     storePassword MYAPP_RELEASE_STORE_PASSWORD
                     keyAlias MYAPP_RELEASE_KEY_ALIAS
                     keyPassword MYAPP_RELEASE_KEY_PASSWORD
                 }
             }
       }
       buildTypes {
           release {
             ... ...
   	        signingConfig signingConfigs.release
           }
       }
   }
   

發布

cd android
./gradlew assembleRelease

生成的 apk 在 app/build/outputs/apk 下

附錄

啟動一直卡在 Starting packager…

修改如下內核參數后再啟動：

sudo sysctl -w fs.inotify.max_user_watches=1000000

永久修改此參數，可以把這個配置加入到： /etc/sysctl.conf 中

./gradlew assembleRelease 時無法運行 aapt

java.io.IOException: Cannot run program "/opt/android/build-tools/23.0.1/aapt": error=2, No such file or directory

安裝 確實的 package

sudo  apt-get install lib32stdc++6 lib32z1

Couldn't find preset "babel-preset-react-native-stage-0/decorator-support"

安裝相應的 package

cd ..
yarn add babel-preset-react-native-stage-0
cd android
./gradlew assembleRelease