反应原生弹性高度答案

【问题标题】：React Native Flex Height反应原生弹性高度
【发布时间】：2018-08-19 06:22:40
【问题描述】：

所以我在学习 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

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 in %？有没有可能？

另外，这样的案例有什么好的做法？

【问题讨论】：

标签： react-native layout flexbox

【解决方案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' （默认是列）。然后孩子有 0.4 和 0.6 的 flex，这告诉 RN 使用所有可用水平空间的 40% 和 60%。这与使用宽度相同。

结果：

如果这不是您想要的，请告诉我。干杯

【讨论】：