前言
- 之前就學(xué)習(xí)過一段時(shí)間的RN时捌，但是卻還沒有系統(tǒng)的學(xué)完怒医。發(fā)現(xiàn)時(shí)間久了豺旬，很多知識都快要淡了腮介，最近上班比較閑，準(zhǔn)備重新?lián)炱饋聿畚馈Ｒ郧皼]有寫簡書的習(xí)慣拿诸，主要的原因是詞窮扒袖，加上本人比較懶(之前買過兩本RN的書，現(xiàn)在不知道在哪墊桌角呢)亩码。但是看到身邊的同行都在發(fā)憤圖強(qiáng)季率，我也不能落后太多了。
React-Native簡介
- React Native (簡稱RN)是
Facebook于2015年4月開源的跨平臺移動(dòng)應(yīng)用開發(fā)框架描沟，是Facebook早先開源的UI框架 React 在原生移動(dòng)應(yīng)用平臺的衍生產(chǎn)物飒泻，目前支持iOS和安卓兩大平臺。RN使用Javascript語言吏廉，類似于HTML的JSX泞遗，以及CSS來開發(fā)移動(dòng)應(yīng)用。主要包含了以下主要特性：- 原生的iOS組件：
React Native主張“Learn once, write everywhere”而非其他跨平臺工具一直宣揚(yáng)的“Write once, run everywhere”席覆。通過React Native史辙，開發(fā)者可以使用UITabBar、UINavigationController等標(biāo)準(zhǔn)的iOS平臺組件佩伤，讓應(yīng)用界面在其他平臺上亦能保持始終如一的外觀聊倔、風(fēng)格。 - 異步執(zhí)行：
JavaScript應(yīng)用代碼和原生平臺之間所有的操作都采用異步執(zhí)行模式畦戒，原生模塊使用額外線程方库，開發(fā)者可以解碼主線程圖像结序、后臺保存至磁盤障斋、無須顧忌UI等諸多因素直接度量文本設(shè)計(jì)布局。 - 觸摸處理：
React Native引入了一個(gè)類似于iOS上Responder Chain響應(yīng)鏈?zhǔn)录幚頇C(jī)制的響應(yīng)體系徐鹤，并基于此為開發(fā)者提供了諸如TouchableHighlight等更高級的組件垃环。
- 原生的iOS組件：
編輯器
- 關(guān)于編輯器這個(gè)問題，最開始我用的是Webstorm返敬，它的正式版是要收費(fèi)的遂庄，雖然用的是破解版，但是發(fā)現(xiàn)用起來并不是那么爽劲赠，每次打開工程都好慢(可能是電腦性能問題)涛目。后來發(fā)現(xiàn)了另一款非常不錯(cuò)的編輯器Atom秸谢，一款輕量級但功能十分強(qiáng)大的前端開發(fā)工具。
- 安裝插件霹肝，F(xiàn)ile ---> Setting --> Install估蹄，可直接搜索。在這里推薦幾款常用插件：
- simplified-chinese-menu ：一款漢化插件
- color-picker : 用于顏色取值沫换，支持多種格式臭蚁；
- atom-ternjs ：一款代碼提示的插件
初始化項(xiàng)目
- 打開終端，輸入以下命令
react-native init HelloWorld
如果想要指定react-native的版本的話可以使用如下命令
rninit init HelloWorld --source react-native@0.44.0
- 項(xiàng)目初始化完畢時(shí)讯赏，會(huì)自動(dòng)創(chuàng)建
iOS和Android工程垮兑，和對應(yīng)的JS文件，index.ios.js漱挎，index.android.js系枪。并且通過Npm加載package.json中描述的第三方框架，放入node_modules文件夾中 - 打開iOS工程识樱，查看
AppDelegate.m文件嗤无，查看程序啟動(dòng)完成：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
// 獲取js文件url
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
// 加載控件，moduleName不能亂傳怜庸，必須跟js文件中注冊的模塊名字保持一致
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"HelloWorld"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
// 創(chuàng)建窗口
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
// 創(chuàng)建窗口根控制器
UIViewController *rootViewController = [UIViewController new];
// 設(shè)置根控制器的視圖
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
// 顯示窗口
[self.window makeKeyAndVisible];
return YES;
}
- 用Atom打開工程当犯，查看index.ios.js文件
// ES6寫法
// 1.加載React,Componet組件
import React,{compoent} from 'react'
// 2.加載原生組件
import
{
AppRegistry,
StyleSheet,
View,
Text
}
from 'react-native'
// 3.自定義組件,作為程序入口組件
export default class ReactDemo extends Component {
// 當(dāng)加載組件的時(shí)候,就會(huì)調(diào)用render方法,去渲染組件
render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>
HelloWorld
</Text>
</View>
)
}
}
// 4.創(chuàng)建樣式表
// 傳入一個(gè)樣式對象,根據(jù)樣式對象中的描述,創(chuàng)建樣式表
var styles = Stylesheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(15, 148, 32, 0.98)',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
})
// 5.注冊組件,程序入口
// 第一個(gè)參數(shù):注冊模塊名稱
// 第二個(gè)參數(shù):函數(shù), 此函數(shù)返回組件類名, 程序啟動(dòng)就會(huì)自動(dòng)去加載這個(gè)組件
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo)
