React Native中如何通过键盘获取字符？

Web端的document.addEventListener("keydown")依赖DOM环境，React Native没有DOM，所以需要根据场景选择不同的实现方式：

1. 输入框内的按键监听（官方API） #

如果只需要监听TextInput获得焦点时的按键操作，直接使用React Native官方提供的onKeyPress属性即可：

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

const InputKeyPressDemo = () => {
  const handleKeyPress = (event) => {
    // 打印按下的按键内容
    console.log('按下的按键:', event.nativeEvent.key);
    
    // 示例：监听回车键
    if (event.nativeEvent.key === 'Enter') {
      console.log('回车键被按下');
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>点击输入框后按键测试</Text>
      <TextInput
        placeholder="输入内容..."
        onKeyPress={handleKeyPress}
        style={{ 
          borderWidth: 1, 
          borderColor: '#ccc', 
          borderRadius: 4, 
          padding: 10, 
          marginTop: 10 
        }}
      />
    </View>
  );
};

export default InputKeyPressDemo;

2. 全局按键监听（无需焦点） #

如果需要监听全局范围内的按键（比如Android物理按键、外接键盘），官方没有提供直接API，需要使用第三方库react-native-keyevent：

安装依赖 #

# 使用npm
npm install react-native-keyevent --save

# 使用yarn
yarn add react-native-keyevent

代码实现（Android专属） #

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import KeyEvent from 'react-native-keyevent';

const GlobalKeyPressDemo = () => {
  useEffect(() => {
    // 注册全局keydown事件监听
    const keyDownListener = KeyEvent.addListener('keyDown', (event) => {
      console.log('全局按键信息:', {
        keyCode: event.keyCode,
        pressedKey: event.pressedKey
      });

      // 示例：监听Android返回键
      if (event.keyCode === KeyEvent.KEYCODE_BACK) {
        console.log('返回键被按下');
      }
    });

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      keyDownListener.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>全局按键监听（无需焦点，仅支持Android）</Text>
    </View>
  );
};

export default GlobalKeyPressDemo;

注意事项 #

• iOS平台限制：react-native-keyevent不支持iOS全局按键监听，若需iOS全局监听，需通过原生模块（UIKit）自定义实现，或使用支持iOS的第三方库。
• 全局监听主要用于Android物理按键（返回、菜单、音量键等）或外接键盘的按键捕获。

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