前言

眼看很多公司都開(kāi)始嘗試使用ReactNative,達(dá)到跨平臺(tái)開(kāi)發(fā)，最近也寫(xiě)了很多文章，希望讓更多想了解的同學(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
  • 并且通過(guò)Npm加載package.json中描述的第三方框架，放入node_modules文件夾中

react-native init ReactDemo

• 二、打開(kāi)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;
}

• 三、打開(kāi)index.ios.js文件，使用webStorm打開(kāi)。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,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語(yǔ)法

• 對(duì)于第一次接觸ReactNative的同學(xué)，最痛苦的是什么時(shí)候使用{}，什么時(shí)候使用(),當(dāng)然我也經(jīng)歷過(guò)那段時(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>
        )
    }