嘿，这个需求我刚好在项目里实现过好几次，给你分享靠谱的纯JS层解决方案，完全不用修改原生键盘本身，直接在它上方加自定义工具栏或者按钮组：

核心思路 #

咱们不需要动原生键盘的代码，只需要监听系统键盘的显示/隐藏状态，在屏幕底部（键盘弹出时刚好卡在它上方）渲染一个自定义的工具栏组件，配合布局调整就能完美贴合键盘，实现前缀按钮的效果。

完整可运行代码示例 #

直接上代码，我会一步步给你拆解关键部分：

import React, { useState, useEffect } from 'react';
import { View, TextInput, TouchableOpacity, Text, Keyboard, StyleSheet, Dimensions } from 'react-native';

const KeyboardToolbarDemo = () => {
  const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  // 监听键盘的各种状态事件
  useEffect(() => {
    // 键盘显示时记录状态和高度
    const showHandler = Keyboard.addListener('keyboardDidShow', (event) => {
      setIsKeyboardOpen(true);
      setKeyboardHeight(event.endCoordinates.height);
    });
    // 键盘隐藏时重置状态
    const hideHandler = Keyboard.addListener('keyboardDidHide', () => {
      setIsKeyboardOpen(false);
      setKeyboardHeight(0);
    });
    // 键盘高度变化时（比如切换表情键盘）更新高度
    const frameChangeHandler = Keyboard.addListener('keyboardDidChangeFrame', (event) => {
      setKeyboardHeight(event.endCoordinates.height);
    });

    // 组件卸载时清理监听
    return () => {
      showHandler.remove();
      hideHandler.remove();
      frameChangeHandler.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      {/* 输入区域 */}
      <TextInput
        style={[styles.input, { paddingBottom: isKeyboardOpen ? keyboardHeight + 60 : 0 }]}
        placeholder="试试输入内容..."
        value={inputValue}
        onChangeText={setInputValue}
      />

      {/* 键盘上方的工具栏，仅在键盘弹出时显示 */}
      {isKeyboardOpen && (
        <View style={[styles.toolbar, { bottom: keyboardHeight }]}>
          {/* 自定义按钮组 */}
          <TouchableOpacity style={styles.toolbarBtn} onPress={() => alert('点击了表情按钮')}>
            <Text style={styles.btnText}>😊</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.toolbarBtn} onPress={() => setInputValue(inputValue + ' 加粗文本')}>
            <Text style={styles.btnText}>B</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.toolbarBtn} onPress={() => setInputValue('')}>
            <Text style={styles.btnText}>清空</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.toolbarBtn} onPress={() => Keyboard.dismiss()}>
            <Text style={styles.btnText}>收起键盘</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#f0f0f0',
  },
  input: {
    height: 55,
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 16,
    backgroundColor: '#fff',
    fontSize: 16,
  },
  // 工具栏样式：固定在键盘顶部
  toolbar: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: 55,
    backgroundColor: '#f8f8f8',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // 安卓阴影
  },
  toolbarBtn: {
    paddingHorizontal: 18,
    paddingVertical: 8,
  },
  btnText: {
    fontSize: 18,
    fontWeight: '500',
    color: '#333',
  },
});

export default KeyboardToolbarDemo;

关键细节&避坑指南 #

• 精准贴合键盘：通过keyboardHeight动态设置工具栏的bottom值，不管键盘高度怎么变（比如切换到语音输入、表情键盘），工具栏都能牢牢贴在键盘顶部，不会脱节。
• 避免输入框被遮挡：给输入框加动态的paddingBottom，确保键盘弹出时输入框不会被工具栏或者键盘挡住，这个是我之前踩过的坑，一定要注意！
• 自定义自由度拉满：工具栏里的按钮、布局、样式完全可以自己改，比如加图片按钮、下拉菜单、甚至小型输入框，都不需要碰原生代码。
• 性能优化：记得在组件卸载时移除键盘监听，避免内存泄漏，这个是React Native开发的基本操作啦。

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