React Native中如何让箭头按钮在ImageBackground上正确显示？

我尝试在ImageBackground的四个基本方位放置箭头按钮，思路是用设置了flexDirection='column'和justifyContent='space-between'的容器，内部包含三个元素：

• 顶部的向上箭头
• 中间的左右箭头（该行采用flex row布局，设置justifyContent='space-between'）
• 底部的向下箭头

但当前实现无法正常显示，以下是代码和当前效果截图：

const rightButton = (
    <View style={styles.horizontalButtonContainer}>
        <Icon
        name="arrow-right"
        backgroundColor="#3b5998"
        onPress={pressRight}
        style={styles.horizontalButton}
        />          
    </View>
);

const leftButton = (
    <View style={styles.horizontalButtonContainer}>
        <Icon
        name="arrow-left"
        backgroundColor="#3b5998"
        onPress={pressLeft}
        style={styles.horizontalButton}
        />          
    </View>
);

const downButton = (
    <View style={styles.verticalButtonContainer}>
        <Icon
            name="arrow-down"
            backgroundColor="#3b5998"
            onPress={pressDown}
            style={styles.verticalButton}
        />          
    </View>
);

const upButton = (
    <View style={styles.verticalButtonContainer}>
        <Icon
            name="arrow-up"
            onPress={pressUp}
            style={styles.verticalButton}
        />          
    </View>
);

return (
    <View style={styles.imageContainer}>
        <ImageBackground resizeMode={'cover'} style={styles.imageBackground} source={{uri: imageUrl}}>
            <View style={styles.buttonsContainer}>
                {upButton}
                <View style={styles.innerButtonsContainer}>
                    {leftButton}
                    {rightButton}
                </View>
                {downButton}
            </View>
        </ImageBackground>
    </View>
)

const styles = StyleSheet.create({
    verticalButton: {
        width: 75,
        height: 75
    },
    verticalButtonContainer: {
        flex: 1,
        alignContent: 'center',
        justifyContent: 'center'
    },
    horizontalButton: {
        width: 75,
        height: 75
    },
    horizontalButtonContainer: {
        flex: 1,
        justifyContent: 'space-between'
    },    
    buttonsContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    innerButtonsContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    imageContainer: {
        flex: 1
    },
    imageBackground: {
        flex: 1,
        justifyContent: 'center'        
    },
})

核心问题点： #

1. 不必要的flex:1导致布局拉伸错位：
   • verticalButtonContainer和horizontalButtonContainer设置了flex:1，会强制占据父容器可用空间，导致上下按钮容器挤压中间区域，左右按钮容器被过度拉伸。
   • innerButtonsContainer设置flex:1会占据中间所有垂直空间，完全没必要，应让它仅包裹左右按钮。
2. 错误的布局属性使用：
   • verticalButtonContainer里用了alignContent: 'center'，该属性针对多行flex容器，单行布局需用alignItems: 'center'实现图标水平居中。
   • horizontalButtonContainer里的justifyContent: 'space-between'无效，因为容器内只有一个Icon元素。

修正后的代码： #

样式部分修改：

const styles = StyleSheet.create({
    verticalButton: {
        width: 75,
        height: 75
    },
    // 去掉flex:1，改用alignItems让图标居中
    verticalButtonContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    horizontalButton: {
        width: 75,
        height: 75
    },
    // 去掉flex:1和无效的justifyContent，添加居中属性
    horizontalButtonContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },    
    buttonsContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        // 给按钮留出边距，避免贴边
        paddingHorizontal: 10,
        paddingVertical: 10
    },
    // 去掉flex:1，让容器仅包裹内容，设置宽度确保左右分布生效
    innerButtonsContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%'
    },
    imageContainer: {
        flex: 1
    },
    imageBackground: {
        flex: 1,
        justifyContent: 'center'        
    },
})

组件部分保持原有结构即可。

修正后效果说明： #

• 上下箭头按钮通过buttonsContainer的space-between分别顶到容器顶部和底部，且水平居中。
• 左右箭头按钮通过innerButtonsContainer的space-between分别贴到容器左右两侧。
• 所有按钮容器不再被过度拉伸，仅包裹自身Icon元素，布局符合预期。

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