自定义 React 组件 - 卡片内的文本

Question

我正在尝试创建一个自定义 React 组件：具有样式的“卡片”，使其看起来像一个灰色的矩形，里面有文本。

我会附上文件，但模拟器屏幕是白色的，它没有显示带有文本卡的背景图像。 如果我去掉 Card 组件中的“默认”字样，那么它只会显示灰卡，但仍然没有背景图像。

有任何想法吗？ 谢谢！

那是 App.js

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

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


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

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4ae74',
    alignItems: 'center',
    justifyContent: 'center',
  },
  smallImage: {
    width: 50,
    height: 50
  },
  mediumImage: {
    width: 150,
    height: 150
  },
  container: {
    flex: 1,
    backgroundColor: '#f4ae74',
    justifyContent: 'center',
  },    
bar: {
    position: 'absolute',
    bottom: 0,
    width: "100%",
    height: "10%",
    backgroundColor: '#FFC107',
    borderRadius: 9,
},
card: {
    width: deviceWidth - 32,
    marginHorizontal: 16,
    backgroundColor: 'lightgray',
    height: deviceWidth * 1,
    borderRadius: 35,
  },
shadowProp: {
    shadowRadius: 12,
    shadowOpacity: 0.8,
    shadowColor: "#757575",
    shadowOffset: {
        width: 0,
        height: 3,
    }
  },
  openingCardStyle:{
    bottom: 65, 
    position: 'absolute', 
    height: 550
  }
  
});

然后这是 Card.js

import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { ImageBackground, 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={{align: 'center'}}>
      {props.title}
      {props.subtitle}
    </Text>
    </View>

  );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#f4ae74',
      alignItems: 'center',
      justifyContent: 'center',
    },
    smallImage: {
      width: 50,
      height: 50
    },
    mediumImage: {
      width: 150,
      height: 150
    },
    container: {
      flex: 1,
      backgroundColor: '#f4ae74',
      justifyContent: 'center',
    },    
  bar: {
      position: 'absolute',
      bottom: 0,
      width: "100%",
      height: "10%",
      backgroundColor: '#FFC107',
      borderRadius: 9,
  },
  card: {
      width: deviceWidth - 32,
      marginHorizontal: 16,
      backgroundColor: 'lightgray',
      height: deviceWidth * 1,
      borderRadius: 35,
    },
  shadowProp: {
      shadowRadius: 12,
      shadowOpacity: 0.8,
      shadowColor: "#757575",
      shadowOffset: {
          width: 0,
          height: 3,
      }
    },
    openingCardStyle:{
      bottom: 65, 
      position: 'absolute', 
      height: 550
    }
    
  })

Answer 1

可能是你的图片链接require("./assets/gradient_dark_orange_navy.png")不正确，所以它不显示图片，试试 ramdon image 看看它是否有效source={uri: "https://reactjs.org/logo-og.png"}

Answer 2

问题出在 Card.js 文件中的卡片样式（styles.card）中，您在 styles.card 对象中给出了 backgroundColor 属性，该属性覆盖了您的 ImageBackground。

只需从 styles.card 中删除backgroundColor属性

card: {
    width: deviceWidth - 32,
    marginHorizontal: 16,
    height: deviceWidth * 1,
    borderRadius: 35,
},