React Native Flex布局问题：Image与View无法占满全屏

我在页面中包含两个组件：Image和View。为主View设置flex:1，给Image设置flex:0.7（期望占据屏幕70%空间），给View设置flex:0.3（期望占据剩余30%空间），但实际效果是这两个组件并未占满整个屏幕。

相关代码如下：

import { Image, StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'

const OnboardingItem = ({ item }) => {
    const { width } = useWindowDimensions();

    return (
        <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', }, { width }]}>
            <Image
                style={[styles.image, { width, resizeMode: 'contain', }]}
                source={item.image}
            />
            <View style={{ flex: 0.3 }}>
                <Text>{item.title}</Text>
                <Text>{item.description}</Text>
            </View>
        </View>
    )
}

export default OnboardingItem

const styles = StyleSheet.create({
    image: {
        flex: 0.7,
        justifyContent: 'center',
    }
})

问题截图：

问题原因 #

1. 外层View设置了alignItems: 'center'，会让子元素宽度自动收缩，无法占满屏幕宽度；
2. Image同时设置了固定width和flex:0.7，flex属性在有固定尺寸的情况下无法正确按比例分配高度；
3. 内层文本View未设置宽度，导致仅包裹内容，无法占满屏幕宽度。

修复方案 #

调整布局属性，确保子元素按flex比例分配高度且占满屏幕宽度：

import { Image, StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'

const OnboardingItem = ({ item }) => {
    const { width } = useWindowDimensions();

    return (
        <View style={[{ flex: 1, flexDirection: 'column', justifyContent: 'center' }, { width }]}>
            <Image
                style={styles.image}
                source={item.image}
                resizeMode="contain"
            />
            <View style={styles.textContainer}>
                <Text>{item.title}</Text>
                <Text>{item.description}</Text>
            </View>
        </View>
    )
}

export default OnboardingItem

const styles = StyleSheet.create({
    image: {
        flex: 0.7,
        width: '100%',
        justifyContent: 'center',
    },
    textContainer: {
        flex: 0.3,
        width: '100%',
        paddingHorizontal: 20, // 可选，给文本添加侧边内边距
        justifyContent: 'center',
    }
})

关键调整说明 #

• 外层View移除alignItems: 'center'，让子元素默认占满父容器宽度；
• Image设置width: '100%'配合flex:0.7，确保高度按比例分配，同时resizeMode: 'contain'保证图片完整显示；
• 文本View设置width: '100%'，占满屏幕宽度，flex:0.3分配剩余高度。

内容的提问来源于stack exchange，提问作者Haider Mukhtar