React Native学习（五）- 项目结构

1、index.ios.js结构及注释

/*
  第一部分
  导入ReactNative包，导入ReactNative组件
  AppRegistry：JS运行所有ReactNative应用的入口
  StyleSheet：ReactNative中使用的样式表，类似于CSS样式表
  各种开发中需要的组件

  模板中使用的是ES6语法，ES5语法如下
  let React = require('react-native');
  let {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } = React;

  require函数，搜索目录加载文件
*/
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

/*
  第二部分
  创建ReactNative组件
  模板中使用的是ES6语法 render(){}是ES6中的函数简写
  ES5语法如下：

  var HelloWorld = React.createClass({
      render: function {
        return {};
      }
  });

*/
export default class HelloWorld extends Component {
  render() {
    return (
    );
  }
}

/*
  第三部分
  StyleSheet.create创建样式实例
  在应用中只会被创建一次，不用每次在渲染周期中重新创建
*/
const styles = StyleSheet.create({
});


/*
  第四部分
  注册入口组件
  AppRegistry：负责注册运行ReactNative应用程序的JavaScript入口
  registerComponent注册应用程序的入口组件，告知ReactNative那一个组件被注册为应用的根容器

  第二个参数使用了ES6 语法，箭头函数：() => HelloWorld返回的必须是定义的组件类的名字
  等价于 function() {return HelloWorld}
*/
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

2、Xcode中的显示以及注释

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // 设置index.ios.bundle的请求地址，可以设置远程访问地址或本地资源路径
  // 真机测试，请求地址与电脑设备的网段有关
  // jsbundle是ReactNative的JavaScript代码打包后的文件
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  // 创建RCTRootView对象，负责加载JavaScript APP并渲染相关视图
  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];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

3、组件多个样式的使用，使用数组，数组元素是对象

组件多样式使用.png