怎么做<Text />作为 React Native 中图片的水印

Question

将<Text />作为图片的水印，在官方文档中有说明：

通过嵌套的背景图像

熟悉 Web 的开发人员提出的一个常见功能请求是 background-image。 要处理这个用例，只需创建一个普通的<Image>组件并添加任何您想要在其上分层的子组件。

return (
    <Image source={...}>
        <Text>Inside</Text>
    </Image>
);

我试过，“内部”有白色背景，而不是图像的一部分。

如何将“内部”作为图像的水印？ 谢谢。

Answer 1

您可以使用 ImageBackground 组件

链接-> https://reactnative.dev/docs/imagebackground

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

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;