Question

如何在文本中显示图像？问题是我看不到图像

        <View style={{flex: 1}}>
          <Text style={{flex: 1, color: 'red', height: 50, justifyContent: 'center', alignItems: 'center'}}>This is a Text <ImageBackground style={{flex: 1, height: 100, width: 100}} source={require('../assets/profile.png')}/></Text>
        </View>

Answer 1

Text 组件应该在ImageBackground 组件内，它充当一个容器，就像一个视图，所以可能更像是：

<View style={...}>
<ImageBackground style={...} source={require('../assets/profile.png')}/>
<Text style={...}>This is a Text</Text>
</ImageBackground>
</View>

Answer 2

不太确定您在寻找什么：这将是一个顶部带有文本的图像。

<View style={{ flex: 1, position: "absolute" }}>
              <ImageBackground
                style={{ flex: 1, height: 100, width: 100 }}
                source={require("../assets/profile.png")}
              >
                <Text
                  style={{
                    flex: 1,
                    color: "red",
                    height: 50,
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  This is a Text
                </Text>
              </ImageBackground>
            </View>

这是内嵌的文本和图像：

   <View style={{ flexDirection: "row", position: "absolute" }}>
          <Text
            style={{
              flex: 1,
              color: "red",
              height: 50,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            This is
          </Text>
          <Image
            style={{ flex: 1, height: 100, width: 100 }}
            source={require("../assets/profile.png")}
          />
          <Text> a Text</Text>
        </View>

反应原生如何以文本显示图像

2 个答案: