React Native常用组件之View

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。其中，render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点；

    React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的<div>标签，它是所有组件的父组件。

一、 View组件中常见的属性

Flexbox 弹性布局

Transforms 动画属性

backfaceVisibility enum('visible', 'hidden') 定义界面翻转的时候是否可见

backgroundColor color

borderBottomColor color

borderBottomLeftRadius number

borderBottomRightRadius number

borderBottomWidth number

borderColor color

borderLeftColor color

borderLeftWidth number

borderRadius number

borderRightColor color

borderRightWidth number

borderStyle enum('solid', 'dotted', 'dashed')

borderTopColor color

borderTopLeftRadius number

borderTopRightRadius number

borderTopWidth number

borderWidth number

opacity number 设置透明度，取值从0-1；

overflow enum('visible', 'hidden') 设置内容超出容器部分是显示还是隐藏；

elevation number 高度 设置Z轴，可产生立体效果。

---
#####二、 View组件运用
>    下图就是View的基本运用：
![1.jpeg](http:https://img.haomeiwen.com/i1170347/1c57b80350b7feb6.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
       在图中的render函数中，我们返回了一个顶层的View，然后View中包含着另一个子层的View。
      在顶层的View中的style属性里面设置了其占满父控件，内边距为30，背景颜色为黄色 ；对应子层中的View的style属性中设置了宽度300，高度50，背景色为红色。 这是我们熟悉的css写法。
>运行结果如下：
![2.png](http:https://img.haomeiwen.com/i1170347/32c86a8468865399.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
     在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰、也有利于后期维护。
     下面我们采用StyleSheet来实现一下:
![3.jpeg](http:https://img.haomeiwen.com/i1170347/0af7c41c2b64ed63.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)