Reactjs 如何在React Native中在卡片图像上覆盖文本？

我想在卡片图像上添加文本，并想控制卡片图像上的文本位置。 当我使用featuredSubtitle={“Helo”}将文本置于图像之上时，我无法控制位置。 下面是来自food Panda应用程序的示例图像。如何在我的卡图像上添加平面50等

{“约翰爸爸-乔哈尔镇”}
{$$$，意大利，熊猫精选，薄皮披萨，外卖}
{“Rs:390 | Rs:50交付”}
{“Rs:290最低|免费送货”}

您可以使用绝对位置覆盖文本

import React, { Component } from "react";
import { Text, ImageBackground } from "react-native";

class App extends Component {
  render() {
    return (
      <ImageBackground
        source={{
          uri:
            "https://www.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg"
        }}
        style={{
          height: 100,
          width: 100,
          position: "relative", // because it's parent
          top: 2,
          left: 2
        }}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            position: "absolute", // child
            bottom: 0, // position where you want
            left: 0
          }}
        >
          Hello World
        </Text>
      </ImageBackground>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“react native”导入{Text，ImageBackground}；
类应用程序扩展组件{
render（）{
返回(
我通过位置来解决这个问题。这是代码

        <Text style={{position: 'absolute', top: -150, right: 0 ,backgroundColor: '#fff', fontSize: 15}}>
          {"  35 mins "}
        </Text>
        <Text style={{ position: 'absolute', top: -130, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
          {"  30% OFF   "}
        </Text>
        <Text style={{ position: 'absolute', top: -100, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
          {"  FREE DELIVERY   "}
        </Text>


{“35分钟”}
{“七折”}
{“免费送货”}
您可以通过绝对位置来实现。您特别要求使用卡组件。但是这种方法适用于所有视图。这里您可以参考。我使用

import*as React from'React'；
进口{
文本
看法
样式表，
形象
尺寸，
图像背景，
}从“反应本机”；
从“expo常量”导入常量；
从“react native paper”导入{Card}；
导出默认类App扩展React.Component{
render（）{
返回(
{/**右上角*/}
35分钟
{/**左上角*/}
单位50%
免费送货
{/**卡片文本*/}
爸爸的约翰镇
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
});
您可以使用绝对位置来实现这一点。您可以告诉mw我如何做到这一点，我尝试了很多次，但都失败了！使用position=“absolute”放置文本在样式中添加属性，并根据您的要求为itI添加边距和填充。我尝试过这样做，但它们没有显示在图像上方。仅显示在卡片的书写区域下方。live example:这不是卡片，我知道如何处理简单的图像。任何感谢您的帮助您也可以对卡片使用相同的概念，因为卡片是al因此，我们需要一些小元素
        <Text style={{position: 'absolute', top: -150, right: 0 ,backgroundColor: '#fff', fontSize: 15}}>
          {"  35 mins "}
        </Text>
        <Text style={{ position: 'absolute', top: -130, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
          {"  30% OFF   "}
        </Text>
        <Text style={{ position: 'absolute', top: -100, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
          {"  FREE DELIVERY   "}
        </Text>

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  Dimensions,
  ImageBackground,
} from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Card style={{ width: '100%', height: '50%', borderRadius: 10 }}>
          <ImageBackground
            style={{
              width: '100%',
              height: '80%',
              resizeMode: 'contain',
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
            }}
            source={{
              uri:'https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80',
            }}
          />

          {/** top-right corner */}
          <View style={{ position: 'absolute', top: 0, right: 0 }}>
            <Text
              style={{
                fontSize: 20,
                color: 'black',
                backgroundColor: 'white',
              }}>
              35 mins
            </Text>
          </View>

          {/** top -left */}
          <View style={{ position: 'absolute', top: 10, left: 0 }}>
            <Text
              style={{ fontSize: 20, color: 'white', backgroundColor: 'red' }}>
              Flat 50%
            </Text>
          </View>
          <View style={{ position: 'absolute', top: 40, left: 0 }}>
            <Text
              style={{ fontSize: 20, color: 'white', backgroundColor: 'red' }}>
              Free delivery
            </Text>
          </View>
          {/**Card text */}
          <Text style={{ fontSize: 20, fontWeight: 'bold', paddingLeft: 8 }}>
            Papa's john town
          </Text>
          <Text />
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});