1、index.ios.js結(jié)構(gòu)及注釋
/*
第一部分
導(dǎo)入ReactNative包，導(dǎo)入ReactNative組件
AppRegistry：JS運(yùn)行所有ReactNative應(yīng)用的入口
StyleSheet：ReactNative中使用的樣式表媳瞪，類似于CSS樣式表
各種開發(fā)中需要的組件
模板中使用的是ES6語法，ES5語法如下
let React = require('react-native');
let {
AppRegistry,
StyleSheet,
Text,
View
} = React;
require函數(shù)胡野，搜索目錄加載文件
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
/*
第二部分
創(chuàng)建ReactNative組件
模板中使用的是ES6語法 render(){}是ES6中的函數(shù)簡(jiǎn)寫
ES5語法如下：
var HelloWorld = React.createClass({
render: function {
return {};
}
});
*/
export default class HelloWorld extends Component {
render() {
return (
);
}
}
/*
第三部分
StyleSheet.create創(chuàng)建樣式實(shí)例
在應(yīng)用中只會(huì)被創(chuàng)建一次材失，不用每次在渲染周期中重新創(chuàng)建
*/
const styles = StyleSheet.create({
});
/*
第四部分
注冊(cè)入口組件
AppRegistry：負(fù)責(zé)注冊(cè)運(yùn)行ReactNative應(yīng)用程序的JavaScript入口
registerComponent注冊(cè)應(yīng)用程序的入口組件，告知ReactNative那一個(gè)組件被注冊(cè)為應(yīng)用的根容器
第二個(gè)參數(shù)使用了ES6 語法硫豆，箭頭函數(shù)：() => HelloWorld返回的必須是定義的組件類的名字
等價(jià)于 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
{
// 設(shè)置index.ios.bundle的請(qǐng)求地址笼呆，可以設(shè)置遠(yuǎn)程訪問地址或本地資源路徑
// 真機(jī)測(cè)試，請(qǐng)求地址與電腦設(shè)備的網(wǎng)段有關(guān)
// jsbundle是ReactNative的JavaScript代碼打包后的文件
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
// 創(chuàng)建RCTRootView對(duì)象旨别，負(fù)責(zé)加載JavaScript APP并渲染相關(guān)視圖
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诗赌、組件多個(gè)樣式的使用，使用數(shù)組秸弛，數(shù)組元素是對(duì)象
組件多樣式使用.png
