可以设置View控件的高度、宽度、颜色。
代码如下:
import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
效果如下:
当然,你也可以通过flex属性来弹性的设置宽高:
import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View> ); } }
效果如下:
注意:
组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height,也没有设定flex,则父容器的尺寸为零。其子组件如果使用了flex,也是无法显示的。
当然你也可以使用flexDirection来指定子元素排列的方向是横着排列还是竖着排列,默认是竖着排列。
<View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View>