Android React-Native系列之<二>零基础学习React-Native控件之View

        转载请注明出处：http://blog.csdn.net/llew2011/article/details/51068619

        在上一篇博文中已经讲解了React-Native开发环境的搭建流程，还没有搭建好环境的童靴可以参照Android React-Native系列之<一>零基础搭建React-Native开发环境或者是参照其他大神的博文。今天主要讲解的是React-Native下的View组件的简单使用，如果你已经掌握了View组件的相关知识那你就可以跳过本文了(*^__^*)......

        学习任何一门新的语言或者是新的技术，看官方指导文档则是必不可少的，React-Native为Facebook开源项目，如不清楚官网指导网址请点击这里，如果英语水平有限，则国内有个对应的中文学习网址，前去查看请点击这里，有了这两个网址学习React-Native就可以说是障碍不大了，即使有问题我相信你也可以通过谷哥或度娘或必应解决的。

        在学习View组件前我们先大致浏览一下官网给出的Demo，打开AwesomeProject工程，文件结构如下图所示：

        从文件结构上可以看出该目录下包含了android和ios两个文件夹，猜测这两个文件夹应该是分别对应Android平台和iOS平台下的工程，进入android目录下你会发现这确实是在Android Studio下的配置，ios也应该是同样的道理。除了android和ios文件夹外还有一个node_modules模块，点击进入该文件夹后发现包含了好多模块，这些模块应该是React-Native运行时所需要的环境吧？这里仅仅也是猜测，在不熟悉其作用的前提下我们不要动这里边的内容。除了以上三个文件夹外还有三个文件，分别是index.android.js，index.ios.js和package.json文件，其中index.android.js和index.ios.js文件分别是运行Android和iOS的入口，系统运行时会根据文件名称选择运行哪个文件的，package.json是一个React-Native配置文件，里边主要配置了版本号，工程名称还有所依赖的react的版本号等。以上仅仅根据自己理解简单介绍了一下，后期再继续深入了解吧，(*^__^*) 嘻嘻……

        在React-Native中View是作为创建UI的最基本的控件，它可以嵌套其他视图中也可以有任意类型的子视图(这种嵌套特性相当于Android平台下的ViewGroup)，它对应了一个平台的原生视图，比如是Android下的View，iOS下的UIView或者是Web下的<div>。View是一个支持Flexbox布局、样式、一些触摸处理和一些无障碍功能的容器，我们先看一下index.android.js文件内容，原文件如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet