ReactNative之项目结构介绍（一）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之项目结构介绍

• 一、初始化ReactNative工程
  • 自动创建iOS和安卓工程，和对应的JS文件，index.ios.js，index.android.js
  • 并且通过Npm加载package.json中描述的第三方框架，放入node_modules文件夹中

react-native init ReactDemo

• 二、打开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.创建窗口
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  
  // 4.设置窗口根控制器的View
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  
  // 5.显示窗口
  [self.window makeKeyAndVisible];
  
  return YES;
}

• 三、打开index.ios.js文件，使用webStorm打开。webStorm代码提示

  • iOS程序一启动，就会加载这个文件，去创建组件，并且把加载完的组件显示到界面上

• index.ios.js实现步骤

  • 1.加载React模块，因为需要用到JSX，加载Compoent，需要用到里面的Compoent组件
    • React默认组件，Compoent非默认组件，都在react文件夹中。
  • 2.加载AppRegistry,StyleSheet,Text,View原生组件，在react-native文件夹中
  • 3.自定义组件,作为程序入口组件
  • 4.创建样式表
  • 5.注册组件，程序入口，程序一启动就会自动加载注册组件.

// 1.加载React,Componet组件
import React,{compoent} from 'react'

// 2.加载原生组件
import
{
    AppRegistry,
    StyleSheet,
    View,
    Text
}
from 'react-native'

// 3.自定义组件,作为程序入口组件
export default class ReactDemo extends Component {

    // 当加载组件的时候,就会调用render方法,去渲染组件
    render(){
        return (
            <View style={styles.mainStyle}>

            </View>
        )
    }
}

// 4.创建样式表
// 传入一个样式对象,根据样式对象中的描述,创建样式表
var styles = Stylesheet.create({
    mainStyle:{
        flex:1,
        backgroundColor:'red'
    }
})

// 5.注册组件,程序入口
// 第一个参数:注册模块名称
// 第二个参数:函数, 此函数返回组件类名, 程序启动就会自动去加载这个组件
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo)

ReactNative语法

• 对于第一次接触ReactNative的同学，最痛苦的是什么时候使用{}，什么时候使用(),当然我也经历过那段时间，为此简单总结了下。
• ReactNative中，使用表达式的时候需要用{}包住

style={styles.mainStyle}

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

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

• ReactNative中，对象，字典需要用{}包住
  • style = {},最外层表达式，用{}包住
  • {flex:1},对象，用{}包住

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

• 创建组件<View></View>，必须要用()包住
  • 因此只要返回组件，都需要用()

    render(){
        return (
            <View style={styles.mainStyle}>

            </View>
        )
    }