如何在React Native中在卡片图像上叠加文本？

Question

我想在卡片图像上添加文本，并希望控制卡片图像上的文本位置。当我使用featuredSubtitle = {“ Helo”}时，文字会显示在图像上，但我无法控制位置。这是来自food Panda应用程序的示例图像。如何在卡片图像]上添加Flat 50等

      <Card  featuredSubtitle={"Helo"} image={{uri: 'https://www.papajohns.com.pk/binary_resources/10484676'}}>
        <Text style={{ fontSize: 20,fontWeight: 'bold'}}>
          {"Papa Jhon's - Johar Town"}
        </Text>
        <Text style={{}}>
          {"$$$, Italian, Panda Picks, Thin Crust Pizza, Take Away"}
        </Text>
        <Text style={{textShadowColor: 'red', textShadowRadius: 3, textDecorationLine: 'line-through'}}>
          {"Rs: 390 | Rs: 50 Delivery"} 
        </Text>
        <Text style={{textShadowColor: '#88f549', textShadowRadius: 3,}}>
          {"Rs: 290 minimum | Free Delivery"} 
        </Text>
      </Card>

我想在卡片图像上添加文本，并希望控制卡片图像上的文本位置。当我使用FeaturedSubtitle = {“ Helo”}时，文字会显示在图像上，但我无法控制位置。 ...

Answer 1

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

Answer 2

我通过职位解决此问题。这是代码

Answer 3

您可以通过绝对位置实现它。您专门询问了Card组件。但是这种方法适用于所有视图。在这里，您可以参考snack。我使用react-native-card