【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的入口，并提供了根组件。