一: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配合使用,这样结构上会更加的清晰、也有利于后期维护并且能够获得更高的性能。
在实际的项目可以灵活的配套使用