自定義 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,
},