如何设置样式属性来填充休息空间？
如何设置样式属性来填充休息空间？
提问于 2016-11-03 12:35:30
如您所见，如果已在父视图上添加了三个红色视图。现在我想添加另一个蓝色视图，它可以填充休息空间。如何设置样式？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-03 16:15:23
你可以试试这个；
<View style={{flex:1,backgroundColor:'white'}}>
<View style={{justifyContent:'space-around'}}>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',marginHorizontal:5}}/>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>
</View>
<View style={{flex:1,alignItems:'center',justifyContent:'center',alignSelf:'stretch',backgroundColor:'blue',margin:5}}>
<Text style={{color:'white',fontWeight:'bold'}}>
View
</Text>
</View>
</View>
Stack Overflow用户
发布于 2020-01-26 10:15:49
一个更简单的解决方案是在要填充剩余空间的视图上使用flexGrow: 1 属性。
flexGrow描述了容器中的任何空间应该如何沿着主轴在其子级中分布。布局其子对象后，容器将根据其子对象指定的flex grow值分配任何剩余空间。
flexGrow接受任何浮点值>= 0，其中0是默认值。容器将在其子对象中分配所有剩余空间，这些空间由该子对象的flex grow值加权。
https://facebook.github.io/react-native/docs/flexbox
代码
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.flexContainer}>
<View style={styles.box1}></View>
<View style={styles.box2}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 8,
},
flexContainer: {
backgroundColor: 'black',
height: 100,
flexDirection: 'row'
},
box1: {
backgroundColor: 'blue',
width: 100,
height: '100%'
},
box2: {
backgroundColor: 'red',
height: '100%',
flexGrow: 1
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40393939
复制相关文章
相似问题
腾讯云开发者
