RN開發(fā)流程
- 目標(biāo)： 3月1日—4月14日，熟悉整套開發(fā)流程，并輸出文檔教程。
RN環(huán)境搭建
RN環(huán)境搭建請參考以下鏈接：
http://vipwiki.xunlei.cn/pages/viewpage.action?pageId=4522005
RN界面及功能開發(fā)
RN環(huán)境搭建完成以后
- 創(chuàng)建項目：react-native init Helloworld（創(chuàng)建的過程可能比較慢，因為要下載一個比較大的node_modules依賴包，耐心等待一下就好）
- cd Helloworld（將終端切換到項目所在目錄下）
- 運行項目：
ios: react-native run-ios（或者手動打開Helloworld.xcproject文）
android:react-native run-android - 將工程在模擬器上運行起來
Helloworld項目目錄結(jié)構(gòu)如下：
- 各文件作用如下：
- 'tests' 存放測試代碼，可使用Jtest來寫測試，這快暫時沒有去研究。
- android Android工程文件
- index.android.js Android項目js入口文件
- index.ios.js ios項目js入口文件
- node_modules node.js的依賴包
- package.json RN項目配置文件，版本號，項目名，依賴關(guān)系等
- yarn.lock Yarn 通過一個 yarn.lock （從內(nèi)容上看是一個類似于ios的pod.lock）描述node_modules中所有依賴庫版本的文件。
- 整體架構(gòu)
RN需要一個JS的運行環(huán)境， 在IOS上直接使用內(nèi)置的javascriptcore， 在Android 則使用webkit.org官方開源的jsc.so。 此外還集成了其他開源組件，如fresco圖片組件，okhttp網(wǎng)絡(luò)組件等。
- 使用js來定制UI界面
打開index.ios.js文件，這里頭包含我們helloworld項目的UI元素及布局邏輯。
前面import導(dǎo)入對應(yīng)的依賴包，接下來是一個繼承自Component的Hellowrold類，可以理解為ios的viewcontroller類，每一個class如果需要在界面上顯示內(nèi)容，則必須實現(xiàn)render方法，并在該方法內(nèi)用js代碼實現(xiàn)所有界面元素。
舉個例子：
打開index.ios.js 文件：
import React, { Component } from 'react';
/*
ES6模塊主要有兩個功能：export和import
export用于對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口
import用于在一個模塊中加載另一個含有export接口的模塊。
*/
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class Helloworld extends Component {
render() {
//所有界面元素都通過render()函數(shù)返回
return (
<View style={styles.container}>
//定義一個view容器，屬性支持通過變量獲取，{}表示取變量的值
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
//屬性設(shè)置支持CSS class的方式
const styles = StyleSheet.create({
// StyleSheet 類路徑：node_modules/react-native/Libraries/StyleSheet/StyleSheet.js
/*
create函數(shù)源碼
create<S: Styles>(obj: S): StyleSheet<S> {
const result: StyleSheet<S> = {};
for (var key in obj) {
StyleSheetValidation.validateStyle(key, obj);
result[key] = ReactNativePropRegistry.register(obj[key]);
}
return result;
},
*/
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Helloworld', () => Helloworld);
開發(fā)工具
Sublime, WebStorm
開發(fā)工具推薦使用Subline，使用文檔參考：http://vipwiki.xunlei.cn/pages/viewpage.action?pageId=4522038
開發(fā)語言，語法
JS,JSX
JS是React native開發(fā)的主要語言，同時為了簡化JS語法，RN中JS支持xml標(biāo)簽，也就是JSX語法。
第三方庫
React
React庫是實現(xiàn)JS與本地代碼相互調(diào)用的橋梁。
RN運行原理
RN 會把應(yīng)用的JS代碼（包括依賴的framework）編譯成一個js文件（一般命名為index.android.bundle), RN的整體框架目標(biāo)就是為了解釋運行這個js 腳本文件，如果是js 擴展的API， 則直接通過bridge調(diào)用native方法; 如果是UI界面， 則映射到virtual DOM這個虛擬的JS數(shù)據(jù)結(jié)構(gòu)中，通過bridge 傳遞到native ， 然后根據(jù)數(shù)據(jù)屬性設(shè)置各個對應(yīng)的真實native的View。 bridge是一種JS 和 Java代碼通信的機制， 用bridge函數(shù)傳入對方module 和 method即可得到異步回調(diào)的結(jié)果。
對于JS開發(fā)者來說， 畫UI只需要畫到virtual DOM 中，不需要特別關(guān)心具體的平臺, 還是原來的單線程開發(fā)，還是原來HTML 組裝UI（JSX），還是原來的CSS樣式模型（部分兼容 )。RN的界面處理除了實現(xiàn)View 增刪改查的接口之外，還自定義一套樣式表達CSSLayout，這套CSSLayout也是跨平臺實現(xiàn)。 RN 擁有畫UI的跨平臺能力，主要是加入Virtual DOM編程模型，該方法一方面可以照顧到JS開發(fā)者在html DOM的部分傳承， 讓JS 開發(fā)者可以用類似DOM編程模型就可以開發(fā)原生APP ， 另一方面則可以讓Virtual DOM適配實現(xiàn)到各個平臺，實現(xiàn)跨平臺的能力，并且為未來增加更多的想象空間， 比如react-cavas, react-openGL。而實際上react-native也是從react-js演變而來。
對于 Android 開發(fā)者來說， RN是一個普通的安卓程序加上一堆事件響應(yīng)， 事件來源主要是JS的命令。主要有二個線程，UI main thread, JS thread。 UI thread創(chuàng)建一個APP的事件循環(huán)后，就掛在looper等待事件 , 事件驅(qū)動各自的對象執(zhí)行命令。 JS thread 運行的腳本相當(dāng)于底層數(shù)據(jù)采集器， 不斷上傳數(shù)據(jù)，轉(zhuǎn)化成UI 事件， 通過bridge轉(zhuǎn)發(fā)到UI thread, 從而改變真實的View。 后面再深一層發(fā)現(xiàn)， UI main thread 跟 JS thread更像是CS 模型，JS thread更像服務(wù)端， UI main thread是客戶端， UI main thread 不斷詢問JS thread并且請求數(shù)據(jù)，如果數(shù)據(jù)有變，則更新UI界面。
ios導(dǎo)出RN本地bundle
集成到應(yīng)用中，將js代碼和資源打包到應(yīng)用內(nèi)（熱修復(fù)方式可能導(dǎo)致ios審核被拒）
cd 到rn項目目錄下
react-native bundle --entry-file ./index.ios.js --platform ios --bundle-output ./main.bundle --assets-dest ./myassets --dev false --verbose
輸出文件：
main.bundle
main.bundle.meta
myassets
- 將main.bundle,myasserts添加到項目中，必須保留文件目錄(Create folder references)。
- 參考官方文檔，修改AppDelegate.m文件,使用OPTION 2處的代碼
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
- 一切OK 運行模擬器看效果吧
Android將RN運行腳本發(fā)布到服務(wù)器
可實現(xiàn)熱修復(fù)。
