React Native学习（5）组件的高度与宽度

React Native学习（5）组件的高度与宽度

指定宽高

就是直接赋予组件width和height，React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; export default class MyApp extends Component { render() { return ( <View> <View style={styles.red} /> <View style={styles.bigBlue} /> <View style={styles.black} /> </View> ); } } const styles = StyleSheet.create({ red: { width: 50, height: 50, backgroundColor: 'red', }, bigBlue: { width: 100, height: 100, backgroundColor: 'blue', }, black: { width: 150, height: 150, backgroundColor: 'black', }, }); AppRegistry.registerComponent('MyApp', () => MyApp);

这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。

弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大。 如：

/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; export default class MyApp extends Component { render() { return ( <View style={{flex: 1}}> <View style={styles.red} /> <View style={styles.bigBlue} /> <View style={styles.black} /> </View> ); } } const styles = StyleSheet.create({ red: { flex: 1, width: 50, height: 50, backgroundColor: 'red', }, bigBlue: { flex: 2, width: 100, height: 100, backgroundColor: 'blue', }, black: { flex: 13, width: 150, height: 150, backgroundColor: 'black', }, }); AppRegistry.registerComponent('MyApp', () => MyApp);

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。 比如这样父视图尺寸为0。子组件还使用了flex，则子组件就无法显示了

<View> <View style={styles.red} /> <View style={styles.bigBlue} /> <View style={styles.black} /> </View>

父视图使用指定宽高也是可以的 如：

/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; export default class MyApp extends Component { render() { return ( <View style={{width:300, height:400, backgroundColor: 'yellow'}}> <View style={styles.red} /> <View style={styles.bigBlue} /> <View style={styles.black} /> </View> ); } } const styles = StyleSheet.create({ red: { flex: 1, width: 50, height: 50, backgroundColor: 'red', }, bigBlue: { flex: 2, width: 100, height: 100, backgroundColor: 'blue', }, black: { flex: 13, width: 150, height: 150, backgroundColor: 'black', }, }); AppRegistry.registerComponent('MyApp', () => MyApp);