Question

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

假设用户输入Hey @user1, whats up ?代替@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>

有什么方法可以实现这个目标吗？真的需要帮助。

谢谢

Answer 1

我想你想要这样的东西：

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>标记内。

将原生字符串替换为图像

1 个答案: