反应原生Flex高度

Question

所以我正在学习React Native Flex，并遇到了这个问题：

• 标题：红色
• 身体：绿色
• 页脚：蓝色

让我们只关注正文及其内容。

<View style={styles.body}>
  <View style={styles.container}>
    <View style={styles.yellow}></View>
    <View style={styles.orange}></View>
  </View>
</View>

body: {
  flex: 15,
  justifyContent: 'center',
  alignContent: 'center',
}

在Body内部，我希望有一个类似容器的容器，其中可以容纳元素。

1）如果我给flex <1，我只会将其缩小。

container: {
   flex: 0.9,
   flexDirection: 'row',
}

2）如果我给出宽度和高度，则只有宽度有效。

container: {
   flex: 1,
   flexDirection: 'row',
   width: '90%',
   height: '90%', // doesn't work?
   alignSelf: 'center' // had to add this, without it, container would stick to left side
}

3）添加保证金百分比，将整个容器固定在底部，并且alignSelf不起作用。

4）将边距添加为数字是可行的，但是我要避免使用纯数字，因为它们在其他设备上看起来有所不同。（也是，这是需要的）

我如何从上一张图片获得效果，但只能使用flex和width，height（以％为单位）？可能吗？

另外，对于这种情况有什么好的做法？

Answer 1

因此，这是仅使用flex的方法：

 <View style={{flex: 1}}>

            <View style={{flex: 0.1, backgroundColor: 'red'}}/>

            <View style={{flex: 1, borderColor: 'green', borderWidth: 15}}>

            <View style={{flexDirection: 'row', flex: 1}}>
                <View style={{flex: 0.4, backgroundColor: 'yellow'}}/>    
                <View style={{flex: 0.6, backgroundColor: 'orange'}}/>   
            </View>

            </View>

            <View style={{flex: 0.1, backgroundColor: 'red'}}/>

            </View>

一些解释。Flex是相对的，使用范围是0到1。设置1告诉RN使用所有可用空间。设为0.1表示TN使用“最多可用空间的10％”。那就是我使用的页眉和页脚。当然，您可能想使用另一个值。

对于中间的块，flex为1，因为我希望它能填充其他所有内容。然后边框显示绿色，但是您也可以使用填充或边距。不应有所作为。

最后，如果要水平堆叠布局，则需要使用flexDirection：'row'（默认为column）。然后孩子有0.4和0.6的屈曲度，这告诉RN使用所有可用水平空间的40％和60％。这与使用宽度相同。

结果：

让我知道这是否不是您想要的。干杯