如何设置样式属性以填充剩余空间？

Question

当您看到图像时,如果已在父视图上添加了三个红色视图.现在我想添加另一个可以填充剩余空间的蓝色视图.我该如何设置风格？

Answer 1

一个更简单的解决方案是使用flexGrow: 1视图上的属性来填充剩余空间。

flexGrow 描述了容器内的任何空间应如何沿主轴分布在其子项之间。布置完它的孩子之后，容器将根据其孩子指定的 flex 增长值分配任何剩余空间。

flexGrow 接受任何 >= 0 的浮点值，0 是默认值。一个容器将在其子项之间分配任何剩余空间，由子项的 flex 增长值加权。

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
  }
});

Answer 2

你可以试试这个;

<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>