Flex 并没有在 React Native 中平均拆分组件

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>

现在有两个问题：

将灰色区域视为设备的宽度。 HalfWidthFullHeightCard 占 space 和
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,
  },
});

Working Example Here

Flex 并没有在 React Native 中平均拆分组件

Flex is not splitting components equally in react native

stylesheet

react-native

react-native-stylesheet