自定义反应组件 - 卡中的文本

Question

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

我将附加文件，但是模拟器屏幕是白色的，并且不会在带有文本的卡上显示背景图像。如果我摆脱了卡组件中的“默认”单词，那么它只是显示灰卡，但仍然没有背景图像。

有什么想法吗？谢谢！

那是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映像以查看它是否有效source = source = { URI：“ https：//reactjs.org/logo-og.png”}

Answer 2

问题在于您的卡造型（styles.card）在card.js文件中，您在styles.js files.js文件中提供了背景色属性。卡片对象覆盖了imagebackground。

只需从styles.card删除background color属性

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