【Facebook的UI开发框架React入门之五】视图View与文本Text简介(iOS平台）-goodmao

参考：

样式Style： http://facebook.github.io/react-native/docs/style.html#content

视图View： http://facebook.github.io/react-native/docs/view.html#style

在第三节，我们创建的基于React.native的iOS项目中，

界面部分是一个js文件：index.ios.js

我们需要简单了解一下它的内容和各部分的作用，以便后续开发。

注意：

index.ios.js文件是一个js的源码文件，

我们可以用写字板、Xcdoe或Sublime等软件进行编辑并保存。

我是用 Sublime ，能实现部分代码自动补全和代码颜色标识，比较方便。

React.native 框架只是将  React  组件树转化成为原生的UI。

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

一、 视图 View

视图是在UI设计和显示时，最常用的、最基本的组件/控件。

视图是一个容器，表现为屏幕上的一块矩形区域，

用于显示需要输出的内容，可以包括文字、图片和视频；

视图支持触摸事件处理；

视图View支持各种布局、样式的设置。

视图 View可以嵌套显示，也就是一个视图中，可以包含多个子视图。

二、视图 View 的使用

显示视图，有三个步骤：

1.添加 React 的依赖项

在声明React变量中，添加视图 View 组件：

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

说明：其中添加的是将要使用的React的依赖项。

           这里添加了四个依赖项：

           a. AppRegistry 是指定了app程序入口；

           b. StyleSheet 是下面即将定义的UI的样式，就是界面的各种属性的设置；

           c. View 就是即将用到的视图；

           d. Text 就是即将用到的文本，用于输出字符串；

2.定义文本样式 StyleSheet

作用：定义了一段应用在UI上的样式。

说明：React Native没有实现CSS，而采用JavaScript 来定制应用程序的样式。

           View支持 FlexBox 的布局、样式、触摸事件处理。

           Flexbox布局目的是：提供一个更加有效的方式，制定、调整和分配一个容器和其子项目的布局，

           即使它们的大小是未知或者是动态的。（所以，叫做 Flex 拉伸/伸缩）。

           采用Flex布局，可以让容器改变其子视图的宽度、高度和排列的顺序，

           以最佳方式填充可用空间，

           这样便于实现屏幕适配，即适应于所有类型的显示设备和屏幕大小）。

           Flex容器，会使子视图（伸缩视图）扩展，来填满可用空间，或缩小以防止溢出容器。

var styles = StyleSheet.create ({
  viewStyle: {  //定义 View 视图的样式
    flex: 1,
    backgroundColor: '#F5FCFF', 
  },
  textStyle: {  //定义 Text 的样式
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

说明：上面指定了两个样式，分别用于设置视图View和文本Text的UI布局。
           a.样式 viewStyle

            定义了用于视图View的样式。

            样式名称，由程序员自己决定，保证可读性即可。

            这里两个属性：

            flex:  

                  0: 默认值，不会填充满父视图区域；

                  1: 填充满父视图(父容器) 

            backgroundColor : 

                  指定背景色，即当前View的颜色。

                  可以用：‘#0000FF’、'#0000ff' 或 blue，表示蓝色。

                  颜色值，参考：http://www.w3school.com.cn/html/html_colors.asp

        b.样式 textStyle

           定义了用于文本Text的样式。

           这里设置了三个属性：

             fontsize :     字体属性，20个像素高度和宽度。

             textAlign : 文字对齐方式。

             margin :    边距，单位是像素。

3. 创建React组件对应的类

var HelloReact = React.createClass({ //创建组件类
  render: function() { //渲染的方法: 设置UI
    return (
      <View style={styles.viewStyle}>
        <Text style={styles.textStyle}>
          --Hello goodmao !
        </Text>
      </View>
    );
  }
});

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

分析：

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

ar HelloReact = React.createClass();

        b.组件渲染的方法

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

注意： 只有当组件被渲染时，必须实现render接口方法，

            因为，只有render方法，是用于输出内容组件内容的；

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

        c.标签<View>定义了视图

        作用：设置显示区域，相当于iOS中的UIView控件（Objective-c和Swift）

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

        d.标签<Text>定义了文本

        作用：设置要显示的文本，相当于iOS中的UILabel控件 （Objective-c和Swift）

<Text style = {styles.textStyle}>
          --Hello goodmao !
</Text>