React Native中View不显示、背景图过大超出屏幕问题求助

按钮无法显示问题原因 #

View组件的背景填充需使用backgroundColor属性，你当前配置的color是文本组件的文字颜色属性，仅配置color的空View会渲染为透明状态，因此看不到按钮。

背景图裁剪问题原因 #

1. resizeMode属于ImageBackground的组件属性，不能写在样式中，需要直接在组件标签上声明
2. resizeMode="cover"的原生逻辑是保持图片宽高比，将图片拉伸至填满容器，超出容器边界的部分会自动裁剪，若需要完整展示图片不裁剪，可根据需求调整属性值：

• contain：保持图片宽高比完整展示，容器空余区域留空
• stretch：拉伸图片适配容器尺寸，不保留原图比例，无裁剪无留白

3. 补充给ImageBackground的样式添加width: "100%"，保证宽度适配屏幕尺寸

修正后完整代码 #

import React from 'react';
import { ImageBackground, StyleSheet, View } from 'react-native';

function WelcomeScreen(props) {
    return (
        <ImageBackground 
        style={styles.background}
        source={require("../assets/bg.jpg")}
        // 可根据需求修改resizeMode的取值
        resizeMode="contain"
        >
        <View style={styles.loginButton}></View>
        <View style={styles.registerButton}></View>
        </ImageBackground>
    );
}

const styles = StyleSheet.create({
    background:{
        flex: 1,
        width: "100%",
        justifyContent: "flex-end"
    },
    loginButton:{
        width: "100%",
        height: 70,
        backgroundColor: "#fc5c65"
    },
    registerButton:{
        width: "100%",
        height: 70,
        backgroundColor: "#4ecdc4"
    },
})

export default WelcomeScreen;

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