简介
View是一个容器,支持FlexBox布局。
View既可以作为容器容纳其他组件,也可以作为一个组件包含进另一个容器中。
无论运行在哪个平台上,View都会直接对应这个平台的原生视图,如iOS中的UIView、Android中的android.View,以及HTML中的<div>。
演示
下面是一个View的使用案例的代码:
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View } from 'react-native'; class MyApp extends Component { render() { return ( <View style={{ flexDirection: 'row', height: 100, padding: 20 }}> <View style={{ backgroundColor: 'blue', flex: 0.5 }} /> <View style={{ backgroundColor: 'red', flex: 0.25 }} /> <View style={{ backgroundColor: 'green', flex: 0.25 }} /> </View> ); } } const styles = StyleSheet.create({}); AppRegistry.registerComponent('MyApp', () => MyApp);
从上面的代码中可以看到,render()函数中返回了一个View,这个View中又包含了三个子View。三个子View各有填充颜色,并且占据父View的一定比例的空间。
以上代码的运行效果如下图所示:
使用View时需要注意的地方:
render()函数只能返回一个View或View的子类,不能返回多个并列的View!
Style
Style标签 | 说明 |
---|---|
borderColor | 边框颜色,这边几个就是代表上下左右边框的颜色(borderTopColor,borderRightColor,borderBottomColor,borderLeftColor) |
borderStyle | 边框线的风格,这个和CSS样式是一样的,enum(’solid’,’dotted’,’dashed’) |
opacity | 设置透明度 |
elevation | 高度,设置Z轴,可以产生立体效果 |
backgroundColor | 颜色 |
borderRadius | 边框圆角大小,其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius |
borderWidth | 边框宽度,另外四个是上下左右的边框宽度:borderTopWidth,borderLeftWidth,borderBottomWidth,borderRightWidth |
overflow | 设置超过容器内容显示与否 |