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
