如何在 React Native 中将<文本 /> 作为图像的水印

Question

为了使<Text />作为图像的水印，它在官方文档中显示：

通过嵌套的背景图像

熟悉web的开发人员对一个常见功能的要求是背景图像。要处理这个用例，只需创建一个普通的<Image>组件，并向其添加您想在其上分层的任何子组件

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

我试过了，"内部"有白色背景，而不是图像的部分。

如何将"Inside"作为图像的水印？谢谢

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;