學(xué)習(xí)篇_均來自 袁崢Seemygo 的簡書。

環(huán)境的搭建

webStorm for Mac 破解安裝

ReactNative之項(xiàng)目結(jié)構(gòu)介紹

一、初始化 ReactNative 工程

react-native init ReactDemo

• 自動創(chuàng)建 iOS 和 安卓工程，和對應(yīng)的 JS 文件，index.ios.js，index.android.js

• 并且通過 Npm 加載 package.json 中描述的第三方框架，放入node_modules 文件夾中

  
  

二、打開 iOS 工程,找到 AppDelegate.m 文件，查看程序啟動完成

• 注意: 加載控件方法（initWithBundleURL:moduleName:initialProperties:launchOptions:）
• moduleName 不能亂傳，必須跟 js 文件中注冊的模塊名字保持一致

- (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程序一啟動，就會加載這個文件，去創(chuàng)建組件，并且把加載完的組件顯示到界面上

index.ios.js實(shí)現(xiàn)步驟

1.加載 React 模塊，因?yàn)樾枰玫?JSX，加載k?m'p??n?nt Component，需要用到里面的 Component 組件 React 默認(rèn)組件，Component 非默認(rèn)組件，都在react文件夾中。

import React, { Component } from 'react';

2.加載AppRegistry,StyleSheet,Text,View原生組件，在react-native文件夾中
// red??str? 注冊 // stylesheet ?i?t 樣式表

import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

3.自定義組件,作為程序入口組件

export default class ReactDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <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>
    );
  }
}

4.創(chuàng)建樣式表

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

5.注冊組件，程序入口，程序一啟動就會自動加載注冊組件.

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

// 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)加載組件的時候,就會調(diào)用render方法,去渲染組件
    render(){
        return (
            <View style={styles.mainStyle}>

            </View>
        )
    }
}

// 4.創(chuàng)建樣式表
// 傳入一個樣式對象,根據(jù)樣式對象中的描述,創(chuàng)建樣式表
var styles = Stylesheet.create({
    mainStyle:{
        flex:1,
        backgroundColor:'red'
    }
})

// 5.注冊組件,程序入口
// 第一個參數(shù):注冊模塊名稱
// 第二個參數(shù):函數(shù), 此函數(shù)返回組件類名, 程序啟動就會自動去加載這個組件
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo)

ReactNative語法

• 對于第一次接觸 ReactNative 的同學(xué)，最痛苦的是什么時候使用 {}，什么時候使用 (),當(dāng)然我也經(jīng)歷過那段時間，為此簡單總結(jié)了下。
• ReactNative中，使用表達(dá)式的時候需要用 {} 包住

style={styles.mainStyle}

• ReactNative中,在字符串中使用變量的時候，需要用{}包住

var str = 'hello'
<Text>{str}</Text>

• ReactNative中，對象，字典需要用 {} 包住
• style = {},最外層表達(dá)式，用{}包住
• {flex:1},對象，用{}包住

<View style={{flex:1}}></View>

• 創(chuàng)建組件<View></View>，必須要用()包住
  因此只要返回組件，都需要用()
  render(){
  return (
  <View style={styles.mainStyle}>

        </View>
    )
  

  }