RN開發(fā)流程
- 目標： 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標簽，也就是JSX語法敦迄。
第三方庫
React
React庫是實現(xiàn)JS與本地代碼相互調(diào)用的橋梁恋追。
RN運行原理
RN 會把應(yīng)用的JS代碼（包括依賴的framework）編譯成一個js文件（一般命名為index.android.bundle), RN的整體框架目標就是為了解釋運行這個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 運行的腳本相當于底層數(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ù)。
