реагировать родную строку заменить на изображение

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>.