【Facebook的UI开发框架React入门之四】index.ios.js解读(iOS平台）-goodmao

参考：

https://facebook.github.io/react-native/docs/getting-started.html

https://facebook.github.io/react-native/docs/tutorial.html#content

最新版本的React库源码：react-native v0.5

https://github.com/facebook/react-native/releases/tag/v0.5.0-rc

---------------------------------------------------------------------------------------------------

React.native是facebook开源的一套基于JavaScript的开源框架，

很方便用来开发移动设备的app。

而且，方便及时更新app的UI与数据，也很方便部署。
goodmao希望帮助大家迅速上手掌握！

---------------------------------------------------------------------------------------------------

在第三节，我们创建的基于React.native的iOS项目中，
界面部分是一个js文件：index.ios.js
我们需要简单了解一下它的内容和各部分的作用，以便后续开发。

下面，我们解读一下该文件：
1.设置模式

'use strict';

这行代码'use strict';

作用：开启 Strict Mode，
Strict mode模式下，提高了错误处理能力，
也可以避免一些JavaScript的语言缺陷。

也就是：JavaScript在这种模式下可以更好地执行！

注意：Strict Mode介绍，详见Jon Resig 的文章:“ECMAScript
5 Strict Mode, JSON, and More”

2.导入React.native库

var React = require('react-native');

作用：加载 React-native 库，并将它赋值给变量 React。

React Native
模块加载方式，和
Node.js 相同，都使用：require。

作用相当于 Swift 中的“链接库”或者“导入库”。

3.声明变量

var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;

4.定义文本样式

var styles = StyleSheet.create({
container: {//定义 View 视图的样式
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {//定义 Text 的样式
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {//定义 Text 的样式
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

作用：定义了一段应用在 “Hello World” 文本上的样式。

React Native 使用

CSS 来定义应用界面的样式。

5.创建React组件对应的类

var HelloReact = React.createClass({ //创建组件类
render: function() {
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>
);
}
});

作用：描述将要创建的组件，包括各种行为和属性。

分析：
a.创建组件HelloReact的方法createClass( )

var HelloReact = React.createClass();

b.组件渲染的方法

render: function() {//渲染的方法
return ();
}

注意：只有当组件被渲染时，必须实现render接口方法，
因为，只有render方法，是用于输出内容组件内容的；

其他接口方法，都是可选的。

c.标签<View>定义了视图
作用：设置显示区域，相当于iOS中的UIView控件（Objective-c和Swift）

<View style={styles.container}> //视图 View
</View>

d.标签<Text>定义了文本
作用：设置并显示字符串，相当于iOS的UILabel控件（Objective-c和Swift）。

<Text style={styles.welcome}> //文本 Text
Welcome to React Native!
</Text>

6.定义程序入口

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

作用：用AppRegistry的registerComponent( )方法，定义了App的入口，并提供了根组件。