app開發-原生模式開發（六）

時間 2019-11-29

標籤 app 開發原生模式简体版

原文原文鏈接

React 原生模式開發環境搭建

以前咱們都是使用的沙盒模式進行開發，簡述步驟就是，先安裝一個Expo應用程序，而後使用掃一掃功能在Expo內運行咱們的App，偏向傳統的前端開發方式。html
同時，React Native 能夠採用完整的原生開發模式，將開發好的項目打包編譯成一個獨立 App，而後直接安裝到手機上運行，偏向傳統的 Native 開發方式。前端

[參照文檔] reactnative.cn/docs/0.42/g…java

一、環境安裝

1.一、 Yarn與React-Native-Cli

Yarn 是 Facebook 提供的替代 npm 的工具，能夠加速 node 模塊的下載。React Native 的命令行工具用於執行建立、初始化、更新項目、運行打包服務等任務。node

安裝python

npm install -g yarn react-native-cli
 # 版本檢測
yarn -v
react-native -v
複製代碼

鏡像配置react

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
 # 檢測
yarn config get registry
yarn config get disturl
複製代碼

1.二、Python2

須要注意，RN目前只支持python2.x版本，安裝了3.x版本的須要更換。在安裝python時，注意安裝界面上的 Add Python to path選項, 勾選上會自動將Python配置到環境變量，不然須要手動配置。android

安裝完畢後, 在命令行中鍵入 python --version 進行測試，顯示出版本號即成功ios

C:\Users\Administrator>python --version
Python 2.7.16

複製代碼

1.三、JDK 安裝和環境變量配置

若是使用 Android 系統開發測試，那麼須要安裝 Java SE Development Kit (JDK) ，安裝後須要手動配置環境變量。打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建。環境變量配置後，須要關閉現有的命令行工具而後從新打開，新的環境變量纔會生效。shell

jdk 下載地址： www.oracle.com/technetwork…npm

環境變量配置參考文檔： jingyan.baidu.com/article/d45…

# 1. 建立 JAVA_HOME 環境變量，值爲 jdk 的安裝根路徑，默認
# C:\Program Files\Java\jdk1.8.0_212
 # 2. 編輯 Path 環境變量，在 Path 中加入
# %JAVA_HOME%\bin
# %JAVA_HOME%\jre\bin
#【注意注意注意】若是是Win10一個一個添加便可
 # 3. 建立 CLASSPATH 變量, 值爲
# .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
 # 4. 配置完畢後保存並退出, 而後運行下面命令進行檢測
java -version
javac -version
複製代碼

1.四、Android Studio

Android Studio 是谷歌推出的 Android 集成開發工具，其包含了運行和測試 React Native 應用所需的 Android SDK 和模擬器。

解壓安裝包

2. 進入安裝的 bin 目錄，點擊 studio64.exe 可執行文件進行安裝

4. 點擊後，進入加載界面

點擊取消代理設置

點擊 Next 進行安裝

選擇自定義安裝

默認，下一步

選擇安裝包

隨後進行默認安裝便可，等待下載（注意：該過程耗費的時間很長，須要注意，有可能安裝不成功，多試試幾回！）

安裝

當成功安裝後，出現以下啓動界面：

在Android Studio的歡迎界面中選擇Configure | SDK Manager。

SDK Platforms 配置

SDK Tools 配置

配置環境變量

經過Android Studio安裝的SDK路徑，須要配置到 ANDROID_HOME 環境變量中。

還能夠把Android SDK的tools和platform-tools目錄添加到PATH變量中，這樣就能夠在終端中運行一些Android工具，例如adb devices或android avd等。

1.五、adb工具

adb安裝在Android-sdk路徑下的platform-tools目錄，這個工具是電腦與Android設備進行通訊的通用命令行工具，有幾個經常使用命令須要瞭解，未來打包調試的時候須要保證本機的adb版本須要與模擬器的adb一致，若是不一致能夠複製本機的adb.exe而後覆蓋掉模擬器中的版本。

adb version # 版本
adb devices # 列出鏈接到本機的Android設備與狀態
adb start-server # 啓動adb服務
adb kill-server # 關閉adb服務

二、入門體驗

啓動模擬器

啓動模擬器，運行adb devices命令，查看設備是否正常鏈接，
若是提示adb版本不符合，那麼就須要把本地Android-sdk目錄下的adb.ext複製到模擬器目錄下的bin中，進行覆蓋。而後重啓模擬器進行嘗試。

// 鏈接正常的話會顯示設備信息或地址信息，如：127.0.0.1:62001 device
adb devices

// 若是沒有發現設備，那麼須要手動進行鏈接，夜神模擬器端口62001，MUMU模擬器端口7555
adb connect 127.0.0.1:7555
複製代碼

建立項目

建立項目的時候，保證項目所在目錄沒有中文與空格，而後運行命令建立項目，建立的過程當中須要聯網下載依賴包，須要耐心等待。

# 建立項目，項目名稱自由定義
react-native init projectName
複製代碼

啓動js打包服務

在項目目錄下運行 react-native run-android 命令，默認會啓動一個8081端口的js打包傳輸服務，它的做用是向移動設備提供項目最新的打包生成的bundle.js文件，每當代碼變動時，該服務就會從新打包js並推送給客戶端使用。

啓動服務

# 切入項目目錄
cd projectName
 # 啓動服務，並指定端口
react-native run-android
複製代碼

服務檢測

服務啓動以後，咱們能夠經過瀏覽器測試js是否能夠正常獲得，url以下： http://ip:8081/index.bundle?platform=android

app安裝與運行

在項目目錄下運行react-native run-android命令便會打包android項目, 生成apk文件, 而後自動安裝到Android設備並運行。

react-native run-android
// 最後看到BUILD SUCCESSFUL提示就表明打包成功
複製代碼

接下來設備會自動啓動應用，若是顯示以下界面就表明一切正常能夠開發調試了。

三、項目目錄結構和代碼分析

在項目根目錄下有個 index.js , 它是項目的入口文件, 負責註冊根組件
根目錄下有個 App.js , 是默認生成的根組件, 咱們在 APP 上看到的歡迎界面就是這個組件實現的
嘗試修改 App.js 中的文本內容, 而後手機搖一搖 Reload 查看便可看到修改內容

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}> <Text style={styles.welcome}> react-native學習 </Text> <Text style={styles.instructions}> react-native學習 </Text> </View>
    );
  }
}
複製代碼

根組件代碼解讀

// 導包
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

// Platform.select方法會根據運行環境獲得配置的內容
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// 導出根組件, 組件的定於語法與以前學習的同樣
export default class App extends Component {
  render() {
    return (
      // 返回的視圖須要使用View組件包裹, 做用至關於Div標籤
      <View style={styles.container}>

  		{/* 文本內容使用Text組件包裹, 做用至關於P標籤 */}
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>

      </View>
    );
  }
}

// 定義樣式, 這裏的尺寸大小無需加單位, 元素能夠經過數組引用多個樣式, 後面的樣式優先級比前面的高
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
複製代碼

四、打包正式版

4.一、產生簽名的key

該過程會用到 keytool 密鑰和證書管理工具(jdk 提供： C:\Program Files\Java\jdk1.8.0_212\bin\keytool.exe )，在項目的主目錄中執行：

# 生成簽名key，注意記下你的密鑰和存儲密碼，後面配置文件須要使用
keytool -genkey -v -keystore my-release-key.keystore -alias 本身起的別名 -keyalg RSA -keysize 2048 -validity 10000
 # 將keystore文件移動至android/app/文件夾
move my-release-key.keystore android/app/
複製代碼

4.二、修改android/gradle.properties文件，增長以下配置

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=本身起的別名
MYAPP_RELEASE_STORE_PASSWORD=存儲密碼
MYAPP_RELEASE_KEY_PASSWORD=密鑰

複製代碼

4.三、修改android/app/build.gradle文件，在文件的最末尾增長以下簽名配置

android { 
  signingConfigs { 
    release { 
        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 
    } 
  }
}

複製代碼

4.四、打包

# 在android/app/build/outputs/apk/文件夾中生產能夠發佈的app-release.apk文件
cd android
gradlew assembleRelease
複製代碼

常見打包失敗問題

參考資料 www.open-open.com/lib/view/op…
參考資料 reactnative.cn/docs/0.50/r…

沒法獲取橋接

提示: Could not get BatchedBridge, make sure your bundle is packaged correctly
確保 android/app/src/main/ 目錄下有 assets 文件夾, 若是沒有, 手動建立一個
而後在命令行工具中切入到項目根目錄
執行命令: react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

缺乏許可

Windows腳本
- mkdir "%ANDROID_HOME%\licenses"
- echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"
Linux腳本
- mkdir "$ANDROID_HOME/licenses"
- echo -e "\n8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"

鏈接超時

真機調試

app手動安裝

打包後的 apk 安裝包, 能夠在項目中找到，路徑爲 projecrName/android/app/build/outputs/apk，這個apk安裝包能夠手動安裝到其它模擬器或真機中進行開發調試。
若是自動安裝失敗, 可自行把apk文件拷貝到手機存儲器, 而後手動安裝。

app權限設置

app 運行時須要懸浮框權限，可在設置 => 受權管理 => 應用權限管理 中找到對應的 APP , 而後開啓懸浮框權限。

鏈接方式

手機直連

準備一臺Android手機, 經過數據線鏈接到電腦，設置啓用USB調試
通常的手機在設置中能夠直接找到開發者選項進行開啓, 部分手機開啓的位置可能不一樣，根據須要自行百度一下
手機鏈接成功後運行檢測命令adb devices，若是有輸出設備列表與ID相關的字符串就證實鏈接成功了

局域網鏈接

移動設備除了經過 USB 直連電腦調試開發, 還能夠採用無線的方式進行調試
只要保證手機和電腦在同一個局域網, 而後搖一搖喚出調試菜單
點擊 Dev settings => Debuug server host , 配置本地 IP 地址和端口號 8081 便可
若是出現這個錯誤提示, 說明配置錯了: could not connect to development server

Android環境

雙擊installer_r24.3.4-windows.exe安裝androidSDK
進入安裝目錄，將android-25、android-23(react-native依賴)壓縮包複製到platforms文件夾下，右鍵解壓到當前文件夾
將platform-tools_r23.1.0-windows壓縮包複製到安裝目錄，右鍵解壓到當前文件夾
將 tools 壓縮包複製到安裝目錄，右鍵解壓到當前文件夾
在安裝目錄新建一個build-tools文件夾，而後將build-tools_r23.0.1-windows.zip(react-native依賴)、 build-tools_r23.0.2-windows.zip(weex依賴)和build-tools_r23.0.3-windows.zip壓縮包複製到build-tools，而後依次右鍵解壓到當前文件夾，解壓後的文件夾須要修更名字爲對應的版本號23.0.1、23.0.2和23.0.3
在安裝目錄中，新建extras文件夾，在extras文件夾下新建android文件夾將android_m2repository_r40.zip與support_r23.2.1.zip壓縮包複製到這個android文件夾，右鍵解壓到當前文件夾
配置安裝環境變量：在系統環境變量中新建ANDROID_HOME變量，值爲SDK安裝目錄，而後在Path中新增 ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;