在本机反应中用图像组件替换字符串的某些部分

Question

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

:kiss_mm::kiss_mm::kiss_mm: Lorem Ipsum 只是印刷和排版行业的虚拟文本。:couple_mm: 自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，:star::star: 当一位不知名的打印机采用一种类型的厨房并将其打乱来制作时一本样书。:telephone::telephone:

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

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

我的 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;


}

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

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

它以Srings的形式返回字符并且不显示图像。 关于如何替换字符的任何建议？让函数在我的文本字符串中找到所有表情符号代码并将其替换为相应的图像，非常感谢

Answer 1

您需要做的是通过表情符号在文本上添加split。然后将拆分字符串数组替换为基于该字符串的元素数组。这是一个例子。

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={theTextToEmoticonify} />

Heres a (React not React-Native) live example to play with。这些概念可供您移植到您的应用程序:)