Width和Height确定屏幕上组件的大小。设置组件的高度和宽度的方法有两种:Fixed尺寸和Flex尺寸。
在样式中使用固定高度和固定宽度是设置组件尺寸的最简单方法。 React Native组件的尺寸是无单位的,它们代表与密度无关的像素。
不管屏幕尺寸如何,通常都将组件的尺寸设置为固定大小,并且尺寸完全相同。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-height-and-width.html
来源:LearnFk无涯教程网
import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; export default class HeightWidth extends Component { render() { return ( <View> <View style={styles.powderblue} /> <View style={styles.skyblue} /> <View style={styles.steelblue} /> </View> ); } } const styles = StyleSheet.create({ powderblue:{ width: 100, height: 100, backgroundColor: 'powderblue' }, skyblue:{ width: 200, height: 200, backgroundColor: 'skyblue' }, steelblue:{ height: 300, backgroundColor: 'steelblue' }, })
输出
flex属性为组件设置样式,以根据可用空间动态地对其进行扩展和收缩。设置flex:1将填充组件的所有可用空间,并在与父组件相同的其他组件之间平均共享。
import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; export default class HeightWidth extends Component { render() { return ( <View style={styles.container}> <View style={styles.powderblue} /> <View style={styles.skyblue} /> <View style={styles.steelblue} /> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1 }, powderblue:{ flex:1, backgroundColor: 'powderblue', }, skyblue:{ flex:2, backgroundColor: 'skyblue', }, steelblue:{ flex:3, backgroundColor: 'steelblue', }, })
输出
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)