时间戳

首页 > 解决方案 > 将本机字符串替换为图像

reactjs - 将本机字符串替换为图像

问题描述

我目前正在开发一个应用程序，用户可以在其中提及他们的朋友。如果用户使用@user1I 输入内容，将获得user1' 的图像并显示在消息上。

假设如果用户键入Hey @user1, whats up ?then 代替@user1，则应显示他的缩略图。

用户的缩略图位于其用户名路径中，例如user1.jpg

function getTextWithThumb(str) { 
        var withThumb =  str.replace(userCheckRegex, `<Image source=require("../" + ${$&} + ".jpg") />`) 
        return withThumb
}

在这里，我被困在Image Component与文本一起动态地从反应组件中返回。

<Text>{getTextWithThumb("Hey @user1, whats up ?")}</Text>

这应该给出类似的东西，

<Text> Hey <Image source="some_source" />, whats up ? </Text>

有什么办法可以做到这一点？这里真的需要帮助。

谢谢

标签： reactjsreact-native

解决方案

我想你想要这样的东西：

function getTextWithThumb(str) { 
  const imageSource = str.replace(userCheckRegex, `require(../${$&}.jpg)`);
  return <Image source=`${imageSource}`/>  
}

然后后来：

<Text>{`Hey, ${getTextWithThumb("@user1")}, what's up?`}</Text>

正如@Robbie 提到的，您可能必须将您<Image />的标签放在<View>标签内。

推荐阅读