React Native中如何为自定义数字键盘触发按键输入事件？

核心实现思路 #

利用React Native内部的Keyboard.emit方法触发原生keyPress事件，让当前聚焦的TextInput自动处理输入逻辑，无需手动维护文本状态、光标位置等细节。

具体代码实现 #

1. 导入依赖模块

import { Keyboard, TextInput, Pressable, Text, View } from 'react-native';

2. 定义按键触发函数
   这个函数负责向系统发送对应按键的keyPress事件，参数为要输入的字符或功能键名称：

const triggerKeyPress = (key) => {
  // 按系统keyPress事件的结构传递参数
  Keyboard.emit('keyPress', {
    nativeEvent: { key }
  });
};

3. 配置TextInput组件
   保持原有showSoftInputOnFocus={false}的设置，确保屏蔽原生键盘同时能接收焦点：

<TextInput
  showSoftInputOnFocus={false}
  style={{
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 18,
    marginBottom: 20
  }}
  keyboardType="numeric"
  placeholder="请输入数字"
/>

4. 渲染自定义数字键盘
   通过Pressable组件模拟按键，点击时调用triggerKeyPress传入对应字符：

<View style={{ flexDirection: 'row', flexWrap: 'wrap', maxWidth: 300 }}>
  {['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.', 'Backspace'].map(key => (
    <Pressable
      key={key}
      onPress={() => triggerKeyPress(key)}
      style={{
        width: '30%',
        height: 60,
        backgroundColor: '#f5f5f5',
        margin: '1%',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 8
      }}
    >
      <Text style={{ fontSize: 22 }}>{key}</Text>
    </Pressable>
  ))}
</View>

关键注意事项 #

• 确保TextInput处于聚焦状态：用户点击输入框或通过ref.current.focus()手动聚焦后，Keyboard.emit的事件才会被正确处理。
• 功能键支持：传递'Backspace'可实现删除字符，传递'.'适配小数输入需求，完全兼容原生键盘的逻辑。
• 无需重构现有输入逻辑：所有文本处理、光标移动、输入限制（如keyboardType="numeric"的过滤）都由TextInput自动完成，和原生键盘表现一致。

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu