環(huán)境搭建
http://reactnative.cn/docs/0.50/getting-started.html (react-native官網(wǎng))
1. 安裝JDK
- 從Java官網(wǎng)下載JDK并安裝 (安裝成功后CMD打開命令行輸入
java -version檢查是否安裝成功) - 環(huán)境變量配置
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_144
CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
2. 安裝Android SDK
官網(wǎng)鏈接AndroidDevTools
-
安裝完成后在SDK Platforms窗口中，選擇Show Package Details，然后在Android 6.0 (Marshmallow)中勾選Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
-
在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。==（必須是這個版本）==
-
配置ANDROID_HOME環(huán)境變量
3. 安裝NodeJS
- 從官網(wǎng)下載node.js
- 可使用node -v的命令來測試NodeJS是否安裝成功
4. 安裝git
- git下載地址
- 在安裝過程中注意勾選"Run Git from Windows Command Prompt"，這樣才會把git命令添加到PATH環(huán)境變量中。
5.安裝Python
從官網(wǎng)下載并安裝python 2.7.x（3.x版本不行）
6.測試安裝
react-native init AwesomeProject (初始化一個react-native的項目,這個名字要慎重,影響到之后再小米應(yīng)用商店的發(fā)布)
cd AwesomeProject
react-native run-android
項目結(jié)構(gòu)
- Android app項目在 coding 8lab_devApp項目下的android分支
- Index.android.js是文件入口
- static里面放的是項目中用到的圖片
- src目錄下是項目的js代碼
- custom/pxToDp.js 是將ui給出設(shè)計圖的px像素轉(zhuǎn)換成手機設(shè)備的dp設(shè)配各種手機
- component/url.js 是各個請求都已經(jīng)給出注釋
React-native的樣式
我們在web開發(fā)中 使用的是css來寫樣式,在react-native中直接寫在js文件就可以了,
React-native 默認使用flex布局, 并且flex-direction 默認為column
- 可以把樣式寫在行內(nèi) <Text style={{ color: '#212121', marginLeft: 8 }}>
- 使用StyleSheet.create來集中定義組件的樣式,然后就可以多次引用了
- 你還可以傳入一個數(shù)組——在數(shù)組中位置居后的樣式對象比居前的優(yōu)先級更高，這樣你可以間接實現(xiàn)樣式的繼承。
- 語法要求使用了駝峰命名法，例如將background-color改為backgroundColor。
路由控制
官方推薦 React-navigation來控制路由 https://reactnavigation.org/
-
Android 默認的跳轉(zhuǎn)方式很別扭 讓安卓實現(xiàn)類似iOS的push動畫
- 2 跳轉(zhuǎn)頁面
navigate('Detail',{
title:'圖片詳情',
url:item.url,
});
在StackNavigator中注冊的頁面，需要一一對應(yīng)，才能跳轉(zhuǎn)到相應(yīng)的頁面
在跳轉(zhuǎn)的頁面可以通過this.props.navigation.state.params.title獲取到這個參數(shù)。當(dāng)然這個參數(shù)可以隨便填寫，都可以通過this.props.navigation.state.params.xxx獲取。
- 3 清除跳轉(zhuǎn)記錄
使用reset方法,現(xiàn)在跳轉(zhuǎn)到Login頁面,并清除之前所有的記錄
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Login' }),
]
})
this.props.navigation.dispatch(resetAction)
開發(fā)調(diào)試
- 實時刷新
打開摸機器后 win+M 鍵可以調(diào)出這個界面, 點擊Enable Hot Reloading 就可以實時的看到你修改完代碼的內(nèi)容 - 調(diào)試信息
可以選擇在Js代碼中 alert(‘test’)來查看調(diào)試信息
也可以去谷歌商店下載 React Developer Tools ,然后在模擬器里 win+M后點擊 Debug Js Remotely,之后會自動打開谷歌瀏覽器, F12后就可以看到console.log()信息了
打包發(fā)布
1, 產(chǎn)生簽名的key
該過程會用到keytool，開發(fā)過安卓的都應(yīng)該接觸過該東西。詳細請見密鑰和證書管理工具
在項目的主目錄中執(zhí)行：
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然后就會出現(xiàn)下圖
現(xiàn)在自己看你的項目跟目錄發(fā)現(xiàn)多了一個
my-release-key.keystore文件
[注：在產(chǎn)生的時候需要提供密鑰和存儲密碼，后續(xù)會用到]
2, 設(shè)置gradle變量
1.把my-release-key.keystore文件放到你工程中的android/app文件夾下。
2.編輯 android/gradle.properties（沒有這個文件你就創(chuàng)建一個），添加如下的代碼（注意把其中的****替換為相應(yīng)密碼）
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=xx
MYAPP_RELEASE_KEY_PASSWORD=xx
** [注意替換xx為你自己設(shè)置的密鑰和存儲密碼]**
關(guān)于密鑰庫的注意事項:
一旦你在Play Store發(fā)布了你的應(yīng)用，如果想修改簽名，就必須用一個不同的包名來重新發(fā)布你的應(yīng)用（這樣也會丟失所有的下載數(shù)和評分）。所以請務(wù)必備份好你的密鑰庫和密碼。
3, 添加簽名到項目的gradle配置文件
編輯你項目目錄下的android/app/build.gradle，添加如下的簽名配置：
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file("my-release-key.keystore文件的絕對路徑")
storePassword "密鑰密碼"
keyAlias "my-key-alias"
keyPassword "存儲密碼"
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
4,生成發(fā)行APK包
$ cd android && ./gradlew assembleRelease
然后就可以在下圖目錄中找到apk文件了
==注意每次打包新的apk時候要刪除之前的!!!==
