React Native中如何在TextInput组件内插入自定义emoji图片

以下是三种可落地的实现方案，可根据业务需求选择：

方案1：纯JS侧占位符映射实现（无需修改原生代码，兼容性最好） #

核心逻辑是拆分输入能力和渲染能力，不需要真的将图片插入原生TextInput：

• 给每个自定义emoji分配唯一的专属占位符，建议使用Unicode私域字符或者特殊格式的字符串（比如[emoji:1f602]），避免和用户正常输入的内容冲突
• 原生TextInput仅负责接收输入事件、管理光标/选中状态，设置color: transparent将输入的文字隐藏，仅保留光标可见
• 在TextInput的相同层级叠加一个同尺寸的渲染容器，实时同步TextInput的内容，把占位符替换为<Image>组件渲染，普通文字用<Text>组件渲染
• 监听TextInput的光标变化、滚动、行高变化事件，同步调整上层渲染层的位置和样式，保证光标、内容完全对齐

该方案适配所有React Native支持的iOS/Android版本，性能够满足绝大多数即时通讯、评论输入等场景需求。
示例伪代码如下：

import { useState } from 'react';
import { View, Text, TextInput, Image, StyleSheet } from 'react-native';

const CustomEmojiInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [selection, setSelection] = useState({ start: 0, end: 0 });

  // 把输入的带占位符的内容转成Text+Image组合
  const renderInputContent = () => {
    const segments = inputValue.split(/(\[emoji:[a-f0-9]+\])/g);
    return segments.map((seg, idx) => {
      if (seg.startsWith('[emoji:')) {
        const emojiCode = seg.slice(7, -1);
        return <Image key={idx} source={require(`./src/assets/${emojiCode}.png`)} style={styles.emoji} />
      }
      return <Text key={idx} style={styles.inputText}>{seg}</Text>
    })
  }

  return (
    <View style={styles.inputWrapper}>
      {/* 内容渲染层 */}
      <View style={styles.contentLayer}>
        {renderInputContent()}
      </View>
      {/* 原生输入层 */}
      <TextInput
        style={styles.nativeInput}
        value={inputValue}
        onChangeText={setInputValue}
        selection={selection}
        onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  inputWrapper: {
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 4,
    padding: 8,
    minHeight: 40,
    position: 'relative',
  },
  contentLayer: {
    position: 'absolute',
    top: 8,
    left: 8,
    right: 8,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
  },
  inputText: {
    fontSize: 16,
    lineHeight: 22,
    color: '#333',
  },
  emoji: {
    width: 20,
    height: 20,
    marginHorizontal: 2,
  },
  nativeInput: {
    fontSize: 16,
    lineHeight: 22,
    color: 'transparent',
    padding: 0,
  }
})

方案2：社区封装组件集成 #

目前已有成熟的社区开源组件封装了上述逻辑，同时解决了光标对齐、换行、大批量emoji输入的性能问题，直接集成即可使用，不需要手动处理双端适配逻辑。

方案3：原生自定义组件封装（性能最优） #

如果业务对输入性能、交互流畅度要求极高，可以自行封装原生TextInput组件：

• iOS端使用NSTextAttachment将图片插入到UITextView中，原生侧处理图片尺寸、行高对齐、编辑交互逻辑
• Android端使用ImageSpan将图片插入到EditText中，适配不同系统版本的排版逻辑
• 封装完成后将组件暴露给React Native侧调用，同时提供插入emoji、获取纯文本/带占位符内容的接口即可

内容的提问来源于stack exchange，提问作者SMhd Asadi