Question

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

标题：RED
身体：绿色
页脚：BLUE

让我们只关注Body及其内容。

<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',
}

Inside Body，我想拥有一个类似于容器的容器。

1）如果我给flex＆lt; 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）以百分比形式添加保证金，将整个容器粘到底部，并且对齐自己不起作用。

4）添加保证金作为数字，有效，但我想避免纯数字，因为它们在其他设备上看起来不同。（此外，这是必要的）

如何从上一张照片中获得效果，但只有flex和width，身高％？它甚至可能吗？

此外，对于这样的案例，有什么好的做法？

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'（默认为列）。然后孩子们有0.4和0.6屈服，这告诉RN使用所有可用水平空间的40％和60％。这与使用宽度相同。

结果：

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

React Native Flex高度

1 个答案: