Reactjs 用react native中的图像组件替换字符串的某些部分

嗨，朋友们，我在数据库中保存了包含表情符号代码的文本字符串，这是一个示例文本字符串，如下所示：

：kiss_-mm：：kiss_-mm：：kiss_-mm: Lorem Ipsum只是印刷和排版行业的虚拟文本。：couplemm:Lorem Ipsum自16世纪以来一直是行业标准的虚拟文本，：star：：star：当一位不知名的印刷商拿起一个铅字厨房，将其拼凑成一本铅字样本书。：telephone：：telephone:

我调用一个函数，用图像替换表情符号代码

  <View>
    <Text style={{ minHeight: 50 }}>{this.replaceEmoticons(item.posttexto)}</Text>
 </View>

{this.replaceMoticons（item.posttexto）}

我的JS函数是：

RegExpEscape = (text) => {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
replaceEmoticons = (text) => {

    let emoticons = {
            ":kiss_mm:": "http://xxx.xxx.xxx/assets/v31/png/32/1f468-2764-1f48b-1f468.png",
        ":kiss_woman_man:": "http://xxx.xxx.xxx/assets/v31/png/32/1f469-2764-1f48b-1f468.png",
        ":kiss_ww:": "http://xxx.xxx.xxx/assets/v31/png/32/1f469-2764-1f48b-1f469.png",
        ":england:": "http://xxx.xxx.xxx/assets/v31/png/32/1f3f4-e0067-e0062-e0065-e006e-e0067-e007f.png",
        ":scotland:": "http://xxx.xxx.xxx/assets/v31/png/32/1f3f4-e0067-e0062-e0073-e0063-e0074-e007f.png",
        ":wales:": "http://xxx.xxx.xxx/assets/v31/png/32/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.png",
        ":family_mmbb:": "http://xxx.xxx.xxx/assets/v31/png/32/1f468-1f468-1f466-1f466.png",
        ":family_mmgb:": "http://xxx.xxx.xxx/assets/v31/png/32/1f468-1f468-1f467-1f466.png",
        ":wavy_dash:": "http://xxx.xxx.xxx/assets/v31/png/32/3030.png",
        ":wheel_of_dharma:": "http://xxx.xxx.xxx/assets/v31/png/32/2638.png",
        ":wheelchair:": "http://xxx.xxx.xxx/assets/v31/png/32/267f.png",
        ":white_check_mark:": "http://xxx.xxx.xxx/assets/v31/png/32/2705.png",
        ":white_circle:": "http://xxx.xxx.xxx/assets/v31/png/32/26aa.png",
        ":white_large_square:": "http://xxx.xxx.xxx/assets/v31/png/32/2b1c.png",
        ":white_medium_small_square:": "http://xxx.xxx.xxx/assets/v31/png/32/25fd.png",
        ":white_medium_square:": "http://xxx.xxx.xxx/assets/v31/png/32/25fb.png",
        ":white_small_square:": "http://xxx.xxx.xxx/assets/v31/png/32/25ab.png",
        ":writing_hand:": "http://xxx.xxx.xxx/assets/v31/png/32/270d.png",
        ":x:": "http://xxx.xxx.xxx/assets/v31/png/32/274c.png",
        ":yin_yang:": "http://xxx.xxx.xxx/assets/v31/png/32/262f.png",
        ":zap:": "http://xxx.xxx.xxx/assets/v31/png/32/26a1.png",
        ":sparkles:": "http://xxx.xxx.xxx/assets/v31/png/32/2728.png",
        ":star:": "http://xxx.xxx.xxx/assets/v31/png/32/2b50.png",
        ":star_and_crescent:": "http://xxx.xxx.xxx/assets/v31/png/32/262a.png",
        ":star_of_david:": "http://xxx.xxx.xxx/assets/v31/png/32/2721.png",
        ":stop_button:": "http://xxx.xxx.xxx/assets/v31/png/32/23f9.png",
        ":stopwatch:": "http://xxx.xxx.xxx/assets/v31/png/32/23f1.png",
        ":sunny:": "http://xxx.xxx.xxx/assets/v31/png/32/2600.png",
        ":taurus:": "http://xxx.xxx.xxx/assets/v31/png/32/2649.png",
        ":telephone:": "http://xxx.xxx.xxx/assets/v31/png/32/260e.png",
          ..........
          ..........
    }

    let result = text;
    let emotcode;
    let regex;

    for (emotcode in emoticons) {
        regex = new RegExp(this.RegExpEscape(emotcode), 'gi');
        result = result.replace(regex, function (match) {
            var pic = emoticons[match];
            if (pic != undefined) {
                return (
                <Image style={styles.emtotic} source={{uri: pic}} />
                )

            } else {
                return match;
            }
        });
    }
    return result;


}

RegExpEscape=（文本）=>{
返回text.replace（/[-[\]{}（）*+？，\\^$\\s]/g，“\\$&”）；
}
替换表情=（文本）=>{
让表情符号={
“：kiss_-mm:”http://xxx.xxx.xxx/assets/v31/png/32/1f468-2764-1f48b-1f468.png",
“：亲吻女人男人：”http://xxx.xxx.xxx/assets/v31/png/32/1f469-2764-1f48b-1f468.png",
“：kiss_ww:”http://xxx.xxx.xxx/assets/v31/png/32/1f469-2764-1f48b-1f469.png",
“：英国：”http://xxx.xxx.xxx/assets/v31/png/32/1f3f4-e0067-e0062-e0065-e006e-e0067-e007f.png",
“：苏格兰：”http://xxx.xxx.xxx/assets/v31/png/32/1f3f4-e0067-e0062-e0073-e0063-e0074-e007f.png",
“：威尔士：”http://xxx.xxx.xxx/assets/v31/png/32/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.png",
“：家庭\u mmbb:”http://xxx.xxx.xxx/assets/v31/png/32/1f468-1f468-1f466-1f466.png",
“：系列\u mmgb:”http://xxx.xxx.xxx/assets/v31/png/32/1f468-1f468-1f467-1f466.png",
“：波浪形破折号：”http://xxx.xxx.xxx/assets/v31/png/32/3030.png",
“：法轮：”“http://xxx.xxx.xxx/assets/v31/png/32/2638.png",
“：轮椅：”http://xxx.xxx.xxx/assets/v31/png/32/267f.png",
“：白色复选标记：”http://xxx.xxx.xxx/assets/v31/png/32/2705.png",
“：白色圆圈：：”http://xxx.xxx.xxx/assets/v31/png/32/26aa.png",
“：白色大方形：”：http://xxx.xxx.xxx/assets/v31/png/32/2b1c.png",
“：白色\中\小\正方形：”http://xxx.xxx.xxx/assets/v31/png/32/25fd.png",
“：白色\中等\方形：”http://xxx.xxx.xxx/assets/v31/png/32/25fb.png",
“：白色小方形：”：http://xxx.xxx.xxx/assets/v31/png/32/25ab.png",
“：手写：”http://xxx.xxx.xxx/assets/v31/png/32/270d.png",
“：x:”http://xxx.xxx.xxx/assets/v31/png/32/274c.png",
“：阴阳：”http://xxx.xxx.xxx/assets/v31/png/32/262f.png",
“：zap:”http://xxx.xxx.xxx/assets/v31/png/32/26a1.png",
“：闪烁：”：http://xxx.xxx.xxx/assets/v31/png/32/2728.png",
“：星：：”http://xxx.xxx.xxx/assets/v31/png/32/2b50.png",
“：星星和新月：”：http://xxx.xxx.xxx/assets/v31/png/32/262a.png",
“：大卫之星：”http://xxx.xxx.xxx/assets/v31/png/32/2721.png",
：停止按钮：：“http://xxx.xxx.xxx/assets/v31/png/32/23f9.png",
：秒表：：“http://xxx.xxx.xxx/assets/v31/png/32/23f1.png",
“：sunny:”http://xxx.xxx.xxx/assets/v31/png/32/2600.png",
“：金牛座：”http://xxx.xxx.xxx/assets/v31/png/32/2649.png",
“：电话：”http://xxx.xxx.xxx/assets/v31/png/32/260e.png",
..........
..........
}
让结果=文本；
让emotcode；
让正则表达式；
for（表情符号中的表情代码）{
regex=newregexp（this.RegExpEscape（emotcode），'gi'）；
结果=结果.替换（正则表达式，函数（匹配）{
var pic=表情符号[匹配]；
如果（图！=未定义）{
返回(
)
}否则{
复赛；
}
});
}
返回结果；
}

该函数在我的文本字符串中搜索每个表情符号代码，找到的表情符号代码将替换为相应的图像，但返回一个[Object Object]，如果我输入：

                return (
                "<Image style={styles.emtotic} source={{uri:"+ pic +"}} />"
                )

返回(
""
)

它以字符串的形式返回字符，不显示图像。

---

关于如何替换字符有什么建议吗？让函数在我的文本字符串中找到所有表情符号代码，并将其替换为相应的图像，非常感谢

您需要做的是通过表情符号对文本进行拆分。然后将拆分字符串数组替换为基于该字符串的元素数组。这里有一个例子

function ParsedText({ text }) {
  return text.split(/(:.*?:)/g).map(elem => {
    if (!elem) return null;
    if (emoticons[elem]) {
      return <Image style={styles.emtotic} source={{uri: emoticons[elem]}} />;
    }
    return <Text>{elem}</Text>;
  });
}

函数ParsedText（{text}）{
返回text.split（/（：*？：）/g.map（elem=>{
如果（！elem）返回null；
if（表情符号[elem]）{
返回；
}
返回{elem}；
});
}

这里的用法类似于

<ParsedText text={theTextToEmoticonify} />

---

。您可以将这些概念移植到应用程序中：）

这是因为您将它放在一个字符串中。不要这样做，你需要呈现内容。非常感谢你的帮助，如果它起作用，我有点怀疑。为什么它加载非常慢，有时当我发布150多个图标时，应用程序会挂起？是因为功能问题吗？同时有很多请求？可能是所有请求。可能下载资产或限制表情符号的数量