如何通过Emoji十六进制代码在React Native中渲染Emoji？

问题原因 #

你传入的interest.item.emoji是字符串形式的十六进制代码（例如"0x1F600"或"U+1F600"），React Native的Text组件只会直接渲染字符串内容，不会自动将其解析为对应的Unicode Emoji字符。

解决方法 #

需要手动将十六进制字符串转换为对应的Emoji字符，具体步骤如下：

1. 编写转换函数 #

添加一个工具函数，将十六进制格式的Emoji代码转为字符：

// 转换十六进制Emoji代码为字符
const hexToEmoji = (hexCode) => {
  // 处理U+开头的格式，比如"U+1F600"
  if (hexCode.startsWith('U+')) {
    hexCode = hexCode.replace('U+', '0x');
  }
  // 处理0x开头的格式，比如"0x1F600"
  const codePoint = parseInt(hexCode, 16);
  return String.fromCodePoint(codePoint);
};

2. 修改Tag组件 #

在Tag组件中使用这个函数转换emoji代码：

type Props = tag | tagIcon;

const Tag = ({ type, label, isSelected, onClick, ...icon }: Props) => {
  const emojiCode = Object.values(icon)[0];
  // 转换为Emoji字符
  const emoji = emojiCode ? hexToEmoji(emojiCode) : undefined;

  return (
      <View
        className={`rounded-full px-[10px] py-[2px] flex flex-row items-center self-start`}
      >
        <Text
          className={`text-base`}
        >
          {label}
        </Text>
        {emoji !== undefined && <Text className="ml-1">{emoji}</Text>}
      </View>
  );
};

3. 适配不同输入格式 #

如果你的interest.item.emoji是纯十六进制数字字符串（比如"1F600"），可以调整转换函数兼容这种格式：

const hexToEmoji = (hexCode) => {
  // 处理纯十六进制数字字符串，比如"1F600"
  if (!hexCode.startsWith('0x') && !hexCode.startsWith('U+')) {
    hexCode = '0x' + hexCode;
  }
  const codePoint = parseInt(hexCode, 16);
  return String.fromCodePoint(codePoint);
};

修改完成后，Tag组件就能正确渲染出Emoji字符，而非显示原始的十六进制代码。

内容的提问来源于stack exchange，提问作者Bryan Romero