以前咱們都是使用的沙盒模式進行開發,簡述步驟就是,先安裝一個Expo應用程序,而後使用掃一掃功能在Expo內運行咱們的App,偏向傳統的前端開發方式。html
同時,React Native 能夠採用完整的原生開發模式,將開發好的項目打包編譯成一個獨立 App
,而後直接安裝到手機上運行,偏向傳統的 Native
開發方式。前端
[參照文檔] reactnative.cn/docs/0.42/g…java
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
複製代碼
須要注意,RN目前只支持python2.x
版本,安裝了3.x版本的須要更換。在安裝python時,注意安裝界面上的 Add Python to path
選項, 勾選上會自動將Python配置到環境變量,不然須要手動配置。android
安裝完畢後, 在命令行中鍵入 python --version
進行測試,顯示出版本號即成功ios
C:\Users\Administrator>python --version
Python 2.7.16
複製代碼
若是使用 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
複製代碼
Android Studio
是谷歌推出的 Android
集成開發工具,其包含了運行和測試 React Native
應用所需的 Android SDK
和模擬器。
當成功安裝後,出現以下啓動界面:
在Android Studio的歡迎界面中選擇Configure | SDK Manager。
經過Android Studio安裝的SDK路徑,須要配置到 ANDROID_HOME
環境變量中。
還能夠把Android SDK的tools和platform-tools目錄添加到PATH變量中,這樣就能夠在終端中運行一些Android工具,例如adb devices或android avd等。
adb安裝在Android-sdk路徑下的platform-tools目錄,這個工具是電腦與Android設備進行通訊的通用命令行工具,有幾個經常使用命令須要瞭解,未來打包調試的時候須要保證本機的adb版本須要與模擬器的adb一致,若是不一致能夠複製本機的adb.exe而後覆蓋掉模擬器中的版本。
// 鏈接正常的話會顯示設備信息或地址信息,如:127.0.0.1:62001 device
adb devices
// 若是沒有發現設備,那麼須要手動進行鏈接,夜神模擬器端口62001,MUMU模擬器端口7555
adb connect 127.0.0.1:7555
複製代碼
建立項目的時候,保證項目所在目錄沒有中文與空格,而後運行命令建立項目,建立的過程當中須要聯網下載依賴包,須要耐心等待。
# 建立項目,項目名稱自由定義
react-native init projectName
複製代碼
在項目目錄下運行 react-native run-android
命令,默認會啓動一個8081
端口的js打包傳輸服務,它的做用是向移動設備提供項目最新的打包生成的bundle.js文件,每當代碼變動時,該服務就會從新打包js並推送給客戶端使用。
啓動服務
# 切入項目目錄
cd projectName
# 啓動服務,並指定端口
react-native run-android
複製代碼
服務檢測
服務啓動以後,咱們能夠經過瀏覽器測試js是否能夠正常獲得,url以下: http://ip:8081/index.bundle?platform=android
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,
},
});
複製代碼
該過程會用到 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/
複製代碼
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=本身起的別名
MYAPP_RELEASE_STORE_PASSWORD=存儲密碼
MYAPP_RELEASE_KEY_PASSWORD=密鑰
複製代碼
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
}
}
}
複製代碼
# 在android/app/build/outputs/apk/文件夾中生產能夠發佈的app-release.apk文件
cd android
gradlew assembleRelease
複製代碼
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/
mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"
mkdir "$ANDROID_HOME/licenses"
echo -e "\n8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"
apk
安裝包, 能夠在項目中找到,路徑爲 projecrName/android/app/build/outputs/apk
,這個apk安裝包能夠手動安裝到其它模擬器或真機中進行開發調試。懸浮框
權限,可在設置
=> 受權管理
=> 應用權限管理
中找到對應的 APP , 而後開啓
懸浮框權限。USB
直連電腦調試開發, 還能夠採用無線
的方式進行調試局域網
, 而後搖一搖喚出調試菜單Dev settings
=> Debuug server host
, 配置本地 IP
地址和端口號 8081
便可錯誤
提示, 說明配置錯了: could not connect to development server
雙擊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;