React Native自定义Card组件时模拟器白屏、背景图不显示问题

两个核心问题导致显示异常：

• 导出/导入不匹配：如果Card组件用export default导出，导入时不能加花括号，必须写import Card from './Components/Card'；如果用export function Card命名导出，导入才需要加花括号import {Card} from ...，不匹配会直接导致组件引用为undefined，触发运行时错误白屏。
• 布局层级缺失flex属性：最外层包裹ImageBackground的View没有设置flex:1，默认高度为0，内部设置了flex:1的ImageBackground无法获得父容器尺寸，根本不会渲染，直接导致背景图不显示，内部的Card组件也跟着无法正常布局。
• 附带的小问题：
  • 文本对齐属性写错，React Native中没有align样式属性，文本居中需要用textAlign: 'center'
  • 两个文件的StyleSheet中都重复定义了同名container样式，后者会覆盖前者，属于无效冗余代码
  • 安卓端阴影不会自动生效，需要补充elevation属性
  • 重复导入React Native组件，ImageBackground、Dimensions都属于react-native包的导出内容，不需要单独拆成一行导入

1. 给App.js最外层的根View添加flex:1样式，让容器占满整个屏幕，给内部的背景图组件提供布局基准
2. 保持Card组件的导出和导入写法匹配：当前Card.js用命名导出，App.js就保留花括号的导入写法，不要随意加default关键字
3. 修正Card组件内Text的样式属性，把align: 'center'改为textAlign: 'center'
4. 清理两个文件里重复的样式、重复的导入语句，避免无效代码干扰布局
5. 确认assets目录下的背景图文件名、路径和代码中require的路径完全一致，注意大小写匹配（安卓环境对文件名大小写敏感）

修复后可直接运行的代码 #

App.js #

import React from 'react';
import { View, ImageBackground, StyleSheet, Dimensions } from 'react-native';
import { Card } from './Components/Card';

const deviceWidth = Dimensions.get('window').width;

export default function App() {
  return (
    <View style={styles.rootContainer}>
      <ImageBackground 
        style={styles.bgContainer} 
        source={require("./assets/gradient_dark_orange_navy.png")}
      >
        <Card title='MY TITLE!' />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1
  },
  bgContainer: {
    flex: 1
  }
});

Card.js #

import React from 'react';
import { View, StyleSheet, Text, Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('window').width

export function Card (props) {
  return (
    <View style={[styles.card, styles.shadowProp, styles.openingCardStyle]}>
      <Text style={styles.cardText}>
        {props.title}
        {props.subtitle}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    width: deviceWidth - 32,
    marginHorizontal: 16,
    backgroundColor: 'lightgray',
    height: deviceWidth,
    borderRadius: 35,
    padding: 20
  },
  shadowProp: {
    shadowRadius: 12,
    shadowOpacity: 0.8,
    shadowColor: "#757575",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    elevation: 8
  },
  openingCardStyle:{
    bottom: 65, 
    position: 'absolute', 
    height: 550
  },
  cardText: {
    textAlign: 'center',
    fontSize: 20
  }
});

改完后重新reload应用，就能正常显示背景图、灰色卡片和卡片内的标题文本。

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