React Native从入门到深入三、组件View的介绍

一：React 中view 的介绍

    他是所有UI中的基础的组件，是其他组件的父组件，View是一个支持Flexbox布局、样式、一些触摸处理、容器，他可以被包含和包含在其他容器中，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的<div>标签

二：View与样式的关联分为内联式和外联式。View的设计是和StyleSheet搭配使用，这样可以使代码更清晰并和获得更高的性能：

三：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轴，可产生立体效果。

四：组件的基本使用

   在图中的render函数中，我们返回了一个顶层的View，然后View中包含着另一个子层的View。

在顶层的View中的style属性里面设置了其占满父控件，内边距为20，背景颜色为黄色 ；对应子层中的View的style属性中设置了宽度100，高度10，背景色为蓝色。

五：在react开发中，推荐组件和StyleSheet配合使用，这样结构上会更加的清晰、也有利于后期维护并且能够获得更高的性能。

   在实际的项目可以灵活的配套使用