作为创建UI时最基础的组件,View
是一个支持Flexbox布局、样式、一些触摸处理和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View
都会直接对应一个平台的原生视图,无论它是UIView、<div>还是android.view。
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<MyCustomComponent {...customProps} />
</View>
View
的设计初衷是和StyleSheet
搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用,我们推荐使用StyleSheet
,这样的话,代码在结构上会更加的清晰、也有利于后期维护。
View组件中常见的属性
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轴,可产生立体效果。