react-native - Flex 在本机反应中没有平等地拆分组件

Question

我正在尝试制作这样的布局：

为此，我制作了两个名为HalfWidthFullHeightCard和的组件HalfWithHalfHeightCard。

我将HalfWidthFullHeightCell组件创建为？

        <TouchableOpacity onPress={pressEvent}>
            <ImageBackground
                source={sourcePath}
                imageStyle={{ borderRadius: 8, resizeMode: 'cover', width: '100%' }}
                style={styles.halfWidthCard}>
                <Text style={styles.halfWidthCardHeading}>{heading}</Text>
                <Text style={styles.halfWidthCardText}>{cardText}</Text>
            </ImageBackground>
        </TouchableOpacity>
...
    halfWidthCard: {
        backgroundColor: colors.brightYellow,
        marginBottom: 10,
        borderRadius: 8,
    },

基于cardText卡片的宽度是自动计算的，并且在halfWidthCardText我只有的样式表中padding: 10

接下来的HalfWithHalfHeightCard一切都是一样的，除了样式是：

...

    smallHalfWidthCard: {
        backgroundColor: colors.brightYellow,
        borderRadius: 8,
        marginBottom: 10
    },
    smallHalfWidthCardHeading: {
        padding: 10,
    },
    smallHalfWidthCardText: {
        padding: 10,
    },

我将这两个组件放在一起的地方是：

<ScrollView contentContainerStyle={{padding: 15}}>
    <View style={{flexDirection: 'row',}}>
                <HalfWidthFullHeightCell />
                <View>
                    <HalfWithHalfHeightCell />
                    <HalfWithHalfHeightCell />
                </View>
    </View>
</ScrollView>

现在有两个问题：

1. 将灰色区域视为设备的宽度。HalfWidthFullHeightCard占用 100% 的空间和
2. 位于HalfWithHalfHeightCard屏幕之外，并且与 的高度不同HalfWidthFullHeightCard。

那么，我怎样才能使这些组件灵活，以便它们随着屏幕尺寸的变化而适应布局呢？

Answer 1

我会这样

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';

const ScreenWidth = Dimensions.get('window').width;

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.WholeBox}>
        <View style={styles.Block}></View>
        <View style={{ flex: 1 }}>
          <View style={styles.Block}></View>
          <View style={styles.Block}></View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  WholeBox: {
    width: ScreenWidth,
    height: 300,
    flexDirection: 'row',
  },
  Block: {
    flex: 1,
    backgroundColor: '#DDA73A',
    margin: 6,
    borderRadius: 8,
  },
});

这里的工作示例