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