前言
眼看很多公司都開始嘗試使用ReactNative,達(dá)到跨平臺(tái)開發(fā)雏逾，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.
如果喜歡我的文章熊尉，可以關(guān)注我微博:袁崢Seemygo
ReactNative之項(xiàng)目結(jié)構(gòu)介紹
- 一沪猴、初始化ReactNative工程
- 自動(dòng)創(chuàng)建iOS和安卓工程麸俘，和對(duì)應(yīng)的JS文件，index.ios.js吵瞻，index.android.js
- 并且通過Npm加載package.json中描述的第三方框架葛菇，放入node_modules文件夾中
react-native init ReactDemo
- 二、打開iOS工程,找到AppDelegate.m文件橡羞，查看程序啟動(dòng)完成
- 注意:加載控件方法（initWithBundleURL:moduleName:initialProperties:launchOptions:）
-
moduleName不能亂傳眯停，必須跟js文件中注冊(cè)的模塊名字保持一致
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
// 1.獲取js文件url
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
// 2.加載控件
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactDemo"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
// 3.創(chuàng)建窗口
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
// 4.設(shè)置窗口根控制器的View
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
// 5.顯示窗口
[self.window makeKeyAndVisible];
return YES;
}
-
三、打開index.ios.js文件卿泽，使用webStorm打開莺债。webStorm代碼提示
- iOS程序一啟動(dòng)，就會(huì)加載這個(gè)文件签夭，去創(chuàng)建組件齐邦，并且把加載完的組件顯示到界面上
-
index.ios.js實(shí)現(xiàn)步驟
- 1.加載React模塊，因?yàn)樾枰玫絁SX第租，加載Compoent措拇，需要用到里面的Compoent組件
- React默認(rèn)組件，Compoent非默認(rèn)組件慎宾，都在react文件夾中丐吓。
- 2.加載AppRegistry,StyleSheet,Text,View原生組件浅悉，在react-native文件夾中
- 3.自定義組件,作為程序入口組件
- 4.創(chuàng)建樣式表
- 5.注冊(cè)組件，程序入口券犁，程序一啟動(dòng)就會(huì)自動(dòng)加載注冊(cè)組件.
- 1.加載React模塊，因?yàn)樾枰玫絁SX第租，加載Compoent措拇，需要用到里面的Compoent組件
// 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.mainStyle}>
</View>
)
}
}
// 4.創(chuàng)建樣式表
// 傳入一個(gè)樣式對(duì)象,根據(jù)樣式對(duì)象中的描述,創(chuàng)建樣式表
var styles = Stylesheet.create({
mainStyle:{
flex:1,
backgroundColor:'red'
}
})
// 5.注冊(cè)組件,程序入口
// 第一個(gè)參數(shù):注冊(cè)模塊名稱
// 第二個(gè)參數(shù):函數(shù), 此函數(shù)返回組件類名, 程序啟動(dòng)就會(huì)自動(dòng)去加載這個(gè)組件
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo)
ReactNative語法
- 對(duì)于第一次接觸ReactNative的同學(xué)术健，最痛苦的是什么時(shí)候使用{}，什么時(shí)候使用(),當(dāng)然我也經(jīng)歷過那段時(shí)間粘衬，為此簡(jiǎn)單總結(jié)了下苛坚。
- ReactNative中，使用表達(dá)式的時(shí)候需要用{}包住
style={styles.mainStyle}
- ReactNative中,在字符串中使用變量的時(shí)候色难，需要用{}包住
var str = 'hello'
<Text>{str}</Text>
- ReactNative中，對(duì)象等缀，字典需要用{}包住
- style = {},最外層表達(dá)式枷莉，用{}包住
- {flex:1},對(duì)象，用{}包住
<View style={{flex:1}}></View>
- 創(chuàng)建組件<View></View>尺迂，必須要用()包住
- 因此只要返回組件笤妙，都需要用()
render(){
return (
<View style={styles.mainStyle}>
</View>
)
}
