React-Native開發總結+構建-除錯-基礎歸納總結
更新時間：2017年11月07日16:47:07
對於前端工程師來說，這幾年是最輝煌的時刻，前端框架層出不窮，而且出現了像RN這種功能的框架，更讓移動開發工程師大跌眼鏡望洋興嘆。新技術的不斷湧現，說明了一個問題，前端在程式設計技術界的地位越來越高，而且前端工程師的崗位越來越有挑戰性，如果不努力學習就趕不上大部隊了。
雖然RN框架相容Android和iOS平臺，即一套程式碼開發出的native app可以執行在兩個不同的作業系統環境上，但相容性問題是非常多的，尤其在具體功能的實現上需要做相容處理。更多的相容性問題，我會在後期專案上線後整體出來釋出。
一、Android開發環境的配置和搭建
本人第一次從開始配置環境到專案成功執行，花費了整整3天的時間，因此，對於初學者來說，不要太著急，一步一步來操作，遇到問題解決問題，心態要好。搭建環境的大致步驟，可以參考
具體細節問題，整理如下，可做參考：
需要的基礎環境：NodeJS，GIt，java開發環境，Android studio開發包，genymotion模擬器
react-native run-android 執行專案
react-native log-android 列印日誌
1、關於模擬器
genymotion軟體是一個手機模擬器容器，這個軟體自帶很多手機，尺寸和Android版本可根據專案需求進行選擇和配置，下載一個屬於自己的模擬器手機會自動嵌入式的安裝在genymotion中。（首次啟動手機，需要開啟開發者模式，設定-關於手機-版本號-點選10次左右-開啟開發者模式彈框，設定-開發者模式-開啟
另外一個國產模擬器夜神也可以當做開發除錯使用。
2、關於adb
adb全稱為Android Debug Bridge，就是起到除錯橋的作用。這是一個工具（軟體），可以管理裝置或手機模擬器的狀態。還可以進行很多手機操作，如安裝軟體、系統升級、執行shell命令等等。adb就是連線Android手機與PC端的橋樑，可以讓使用者在電腦上對手機進行全面的操作。adb的相關操作，以下命令需要配置adb環境變數：
$ adb devices;//檢視模擬器裝置是否執行
$ adb kill-server;//關閉服務
$ adb start-server;//開啟服務
3、關於Gradle
Gradle是一個基於Apache Ant和Apache Maven概念的專案自動化構建工具，也是一個基於JVM的構建工具。在命令列安裝不上的解決方案：本地手動安裝。
去官網 下載自己需要的版本，解壓ZIP檔案到：C:\Users\wanshaobo\.gradle\wrapper\dists
以下步驟可以不用操作
新建環境變數 GRADLE_HOME，即 C:\Users\wanshaobo\.gradle\wrapper\dists\gradle-2.4；
修改環境變數 Path，追加 %GRADLE_HOME%\BIN;
輸入快捷鍵 WIN+ R，輸入 cmd，在彈出的視窗輸入命令列： gradle -v；
二、iOS開發環境的配置和搭建
請參考官方文件
三、react-native專案除錯
0、改變Android專案和ios專案的入口檔案
修改Android專案的入口檔案為根目錄的index.android.js：
/RNdemo/android/app/src/main/java/com/rndemo/MainApplication.java
修改上面的檔案內容
@Override
protected String getJSMainModuleName() {
return "index";
}
為
@Override
protected String getJSMainModuleName() {
return "index.android";
}
修改ios專案的入口檔案為根目錄的index.ios.js：
/RNdemo/ios/RNdemo/AppDelegate.m
修改上面的檔案內容
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
為
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
1、在不同裝置上開啟‘開發者選單’
Android專案開發：
iMac模擬器：fn + f1 或 command + m
windows模擬器：ctrl + win
真機：搖晃手機，如果搖晃手機沒有效果，可以長按選單按鈕，彈出開發者選單
ios專案開發：
command+r reload專案
command+d 開啟開發者選項
2、‘開發者選單’詳解
Reload 重新載入APP
Debug JS Remotely 開啟在Chrome瀏覽器的遠端除錯，下面詳細講解
Enable Live Reload
Enable Hot Reloading 開啟熱載入，程式碼編輯器程式碼變動，儲存後APP會直接產生變化
Toggle Inspector 開啟監聽器
Show Perf Monitor
Start/Stop Sampling Profiler
Dev Settings 開發設定
3、在真機上執行和除錯
真機上安裝請使用Android Studio或Xcode
Apk安裝到真機，如果版本不對，或者不能連上電腦實時除錯，需要搖一搖，開啟'開發者選項'對話方塊，
選擇Dev Settings-Debugging-Debug server & port for device-10.102.11.232:8081，
埠號8081需要看啟動的服務，設定成自己電腦的IP，就可以連上電腦線上除錯專案；
4、像開發web專案一樣檢視DOM元素和CSS樣式
$react-devtools
打開了React Developer Tools工具面板，然後開啟'開發者選項'對話方塊，Toggle Inspector-inspect，
然後點選元素，相應的dom結構和css樣式會在React Developer Tools工具面板中顯示；
5、檢視點選區域大小
開啟'開發者選項'，Toggle Inspector-TouchAbles，選中一個可點選元素，然後關閉
Toggle Inspector，所有可點選元素邊框高亮顯示；
6、Chrome瀏覽器斷點除錯
開啟'開發者選項'對話方塊，選擇Debug JS Remotely，然後再Chrome瀏覽器中開啟‘開發者工具’-
在三個點中選擇Show console drawer，此時‘開發者工具’上面顯示程式碼，下面顯示日誌；在Sources面板的左側
目錄中選擇debuggerWorker.js，開啟相應的檔案，在語句上新增斷點，即可進行相應高階除錯；
7、真機和模擬器抓包除錯
抓包配置如下：
iMac：Charles
Windows：jsFiddle
配置：需要設定真機或模擬器WiFi的IP代理與電腦相同，埠號與抓包工具的監聽埠相同
8、第三方包
常規搜尋第三方包(外掛)的方法，去npm官網搜尋，www.npmjs.com；
同時，rn社群資源有公共維護的js.coach第三方元件庫，可以檢視這裡；
react-timer-mixin 定時器
react-native-linear-gradient 漸變色
react-native-svgsvg 容器
react-navigation 路由-導航
react-redux
redux
react-native-svg
react-native-art js繪相簿
react-native-storage
react-native-image-zoom-viewer 圖集元件-圖片翻頁、縮放、下載
9、Android Studio的使用
開發RN專案的首選編輯器是webstorm，但Android Studio工具方便管理專案；
為一個RN專案啟動服務，常規是在terminal終端輸入react-native run -android，但也可以用Studio啟動：
在Studio中加入外掛RN Console，Android Studio-Preferences-Plugins-Browse Repositories，搜尋並安裝
這個外掛，這個外掛有兩個功能模組Welcome和React Packager，在React Packager可以run開啟服務；
10、Android打包
如果沒有注入簽名，執行./gradlew assembleRelease會生成app-release-unsigned.apk
注入簽名成功，執行./gradlew assembleRelease會生成app-release.apk
第一步，生成簽名金鑰檔案app-release-key.keystore
命令列進入指定目錄下，比如桌面，執行命令
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
自定義輸入金鑰庫密碼和對應金鑰密碼，即可在桌面生成金鑰檔案app-release-key.keystore
第二步，將金鑰檔案放入工程中，並做相關配置
將金鑰檔案放入/Users/wanshaobo/project/app/android/keystores/miapp-release-key.keystore
在/Users/wanshaobo/project/app/android/app/build.gradle檔案中做如下配置，注意signingConfigs在buildTypes前面：
android{
signingConfigs {
release {
storeFile file('../keystores/app-release-key.keystore')
storePassword '123456'
keyAlias 'app-key-alias'
keyPassword '123456'
}
}
buildTypes {
release {
signingConfig signingConfigs.release
}
}
}
四、React native的官方API，用法import { *** } from 'react-native'
BackHandler
監聽安卓物理返回鍵，不重寫監聽事件，則返回上一個頁面，返回false執行預設行為
用法一，BackHandler.exitApp()從首頁退出APP；
用法二，
BackHandler.addEventListener('hardwareBackPress',this.onBackAndroid);
BackHandler.removeEventListener('hardwareBackPress',this.onBackAndroid);
onBackAndroid = ()=>{ ... return true}//return true阻止預設行為
注意：hardwareBackPress事件監聽與解除安裝的位置，監聽一般在componentWillMount中，但解除安裝不一定在componentWillUnMount中，因為頁面跳轉不一定走componentWillUnMount，比如this.props.navigation.navigate('A')是向頁面棧的入棧操作，上一個頁面不會銷燬
<Modal />元件的物理返回鍵重寫為onRequestClose
Platform
用法Platform.OS === 'android' || 'ios'
DeviceEventEmitter
通知-廣播，頁面回退重新整理機制
使用：import {DeviceEventEmitter} from 'react-native'
DeviceEventEmitter.addListener('refreshHomePage',(data)=>{this.refreshHomePage(data)});
DeviceEventEmitter.remove('refreshHomePage');
DeviceEventEmitter.emit('refreshHomePage',data)
需求，B頁面goBack到A頁面，A頁面重新整理；
第一個方案，
this.props.navigation.navigate('B',{callback:()=>{this.refreshA()}});
this.props.navigation.state.params.callback();
this.props.navigation.goBack();
第二個方案，廣播
StatusBar
狀態列元件
主頁設定一次，整個專案的狀態列都一致
設定頂部導航元件樣式：height:72,paddingTop:16
<StatusBar backgroundColor={'transparent'} hidden={false} translucent={true} />
console.log(StatusBar.currentHeight);//Android平臺狀態列高度，常量
隱藏和顯示狀態列：
true ? null :<StatusBar hidden={true}/>
五、報錯彙總
錯誤一：
>Could not resolve all dependencies for configuration ':app:_debugApk'.
> Configuration with name 'default' not found.
原因：專案加入第三方包，然後npm uninstall，解除安裝包之後，需要手動刪除Android專案中的配置
分別刪除三個地方檔案中的配置：
/RNdemo/android/settings.gradle
/RNdemo/android/app/build.gradle
/RNdemo/android/app/src/main/java/com/rndemo04/MainApplication.java
警告二：
使用FlatList元件時，如果屬性值沒有傳遞key值，會報警告，
解決方案：
<FlatList
keyExtractor={this._keyExtractor}
/>
_keyExtractor = (item, index) => index;
六、iconfont使用
在阿里巴巴向量圖示庫中選擇專案需要的icon，新增到購物車，新建一個專案名稱，將選取的icon放到這個專案中，
然後下載匯出iconfont.ttf檔案；
Android專案，將ttf檔案放到，/project/my_App/android/app/src/main/assets/fonts/iconfont.ttf
iOS專案，將ttf檔案放到，/project/my_App/ios/my_App/iconfont.ttf
使用方法：
<Text style={{fontFamily: 'iconfont', color: '#cbcbcb', fontSize: D(20)}}></Text>
為Unicode編碼
七、不同平臺使用不同的內容、元件、樣式
方案一，顯示不同內容：
const element = Platform.select({
ios: '這是ios裝置顯示的內容',
android: '這是Android裝置顯示的內容',
});
const element = Platform.select({
ios:<Text>456</Text>,
android: <Text>123</Text>,
});
class page extends Component{
render(){
<View style={Styles.container}>{element}</View>
}
}
方案二，根據元件不同字尾名，使用不同元件，react-native會自動檢測檔案是否具有.ios或.android的副檔名：
Element.ios.js
Element.android.js
import Element from './Element';
方案三，引入不同依賴：
var Element = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
<Element />;
方案四，渲染樣式：
let Styles = StyleSheet.create({
container:{
flex:1,
...Platform.select({
ios:{backgroundColor:'red'},
android:{backgroundColor:'blue'},
})
}
});
let Styles = StyleSheet.create({
container:{
flex:1,
backgroundColor: (Platform.OS === 'ios') ? 'red' : 'blue',
}
});
方案五，根據路徑不同，引入不同元件：
common/components/android/Element.js
common/components/ios/Element.js
未完，待續...