React Native长按选中文本自定义+按钮并存入Redux实现方法

需求梳理 #

• 长按消息气泡内的Text组件可选中文字
• 文字选中状态下，在选中区域旁展示自定义「+」添加按钮
• 点击按钮可将选中的文本内容存入Redux
• 核心要解决原生selectable属性只能触发系统默认复制菜单、无法自定义操作项、无法直接获取选中文本的问题

现有默认实现代码仅支持系统复制能力：

<Text style={styles.name} selectable={true} selectionColor='orange'>{message}</Text>

具体实现步骤 #

核心原理 #

隐藏系统默认的文本选择菜单，通过Text组件的选中回调实时拿到选中文本的内容、位置坐标，自行渲染悬浮的自定义操作按钮即可。

1. 改造Text组件配置，绑定选中事件

// 组件内先声明状态
const [selectedInfo, setSelectedInfo] = useState(null)
const [showAddBtn, setShowAddBtn] = useState(false)

<Text
  style={styles.name}
  selectable={true}
  selectionColor='orange'
  contextMenuHidden={true} // 关键属性：隐藏系统默认的复制/选择菜单
  onSelectionChange={(e) => {
    const { start, end } = e.nativeEvent.selection
    // 起止位置相同说明是光标移动，没有选中文本，隐藏按钮
    if (start === end) {
      setShowAddBtn(false)
      setSelectedInfo(null)
      return
    }
    // 从原始消息文本里截取出选中的内容
    const selectedText = message.slice(start, end)
    // 拿到选中区域的布局坐标，用来定位自定义按钮
    const selectionRect = e.nativeEvent.selectionRect
    setSelectedInfo({
      text: selectedText,
      rect: selectionRect
    })
    setShowAddBtn(true)
  }}
>
  {message}
</Text>

2. 渲染自定义「+」悬浮按钮
   按钮用绝对定位，位置根据选中区域的坐标计算，放在选中文本上方即可：

{showAddBtn && selectedInfo && (
  <TouchableOpacity
    activeOpacity={0.8}
    style={{
      position: 'absolute',
      top: selectedInfo.rect.top - 44, // 向上偏移44px，避免遮挡选中文本
      left: selectedInfo.rect.left,
      width: 32,
      height: 32,
      borderRadius: 16,
      backgroundColor: '#ffffff',
      elevation: 4,
      shadowColor: '#000000',
      shadowOpacity: 0.12,
      shadowRadius: 6,
      alignItems: 'center',
      justifyContent: 'center'
    }}
    onPress={() => {
      // 点击后把选中文本存入Redux，按需补充消息ID、会话ID等上下文
      dispatch({
        type: 'SAVE_SELECTED_TEXT',
        payload: selectedInfo.text
      })
      // 操作完成后隐藏按钮，清空选中状态
      setShowAddBtn(false)
      setSelectedInfo(null)
    }}
  >
    <Text style={{ fontSize: 22, fontWeight: 500, color: '#1677ff' }}>+</Text>
  </TouchableOpacity>
)}

3. 边界处理

• 给消息列表的最外层容器加点击事件，点击非选中区域时隐藏自定义按钮
• 多行文本场景下如果选中区域跨多行，取最后一行的坐标定位按钮，避免按钮偏移
• iOS端要注意和消息长按弹出的气泡操作菜单做手势互斥，避免两个菜单同时弹出

低版本兼容方案 #

如果使用的React Native版本低于0.63，onSelectionChange回调拿不到选中区域坐标，可以直接用封装好的自定义文本选择组件替代原生Text，这类组件已经提前处理了文本选中、坐标计算、菜单定位逻辑，只需要传入自定义菜单项的配置和点击回调即可，不需要自己手写悬浮层逻辑。

内容的提问来源于stack exchange，提问作者Jeesmon Joy