我试着做一个这样的布局：

为此，我创建了两个组件，分别命名为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%的空间，

1. HalfWithHalfHeightCard位于屏幕之外，并且与HalfWidthFullHeightCard的高度不同。
   那么，我如何使这些组件变得灵活，以便它们能够随着屏幕尺寸的变化而适应布局呢？