如何在React Native中获取用户按键？

Question

如何在React Native中按下键（除了让用户单击文本框之外）？添加到＆lt; view＆gt;组件中时，OnkeyPress和Onkeydown会产生类型错误。

我还看到了此答案，但是它需要第三方套餐。我想象本机应用程序支持键盘输入用于可访问性。

以下代码不起作用，

import { View } from 'react-native'
<View onKeyDown={handleKeyDown}>my app</View>

这会产生以下错误：

Property 'onKeyDown' does not exist on type 'IntrinsicAttributes & InterfaceViewProps & RefAttributes<unknown>'

window.addeventListener（'keydown'）也对Android或iOS不起作用，鉴于没有浏览器，这很有意义。

编辑 我正在尝试在使用应用程序时随时收听用户的任何键盘输入。例如：当使用该应用程序触发盲友好功能时，用户随机按“ F”，而无需单击或看到任何内容。

Answer 1

如果您正在寻找物理键盘处理，那么到目前为止，没有物理键盘键盘处理功能。

您可以尝试第三方库，例如我的： https：https：///www.npmjs .com/package/react-native-external-keyboard

 import {ExternalKeyboardView} from 'react-native-external-keyboard';
  <ExternalKeyboardView
    onKeyDownPress={onKeyDownHandler}
    onKeyUpPress={onKeyUpHandler}
    canBeFocused
  >

Answer 2

好吧，这不是最优雅的方式，但它完全按照您的意愿进行：

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

<TextInput autoFocus onFocus={() => Keyboard.dismiss()} />

键盘钥匙事件侦听器现在可以在不显示键盘的情况下获得按键。
希望这会有所帮助。

Answer 3

您需要使用textInput组件来处理此类事件。您可以在此处找到API： https://reaectnative.dev/docs/dextinput 。

请记住，React库是作为API构建的，因此它可以利用不同的渲染。但是问题是，当使用移动机构渲染器时，您将不会在Web视图上拥有域属性，这是不同的。

Answer 4

我不确定视图组件，但是对于TextInput，这可能会起作用！

<TextInput
    onKeyPress={handleKeyDown}
    placeholder="Sample Text"
/>

对于功能部分：

const handleKeyDown = (e) => {
    if(e.nativeEvent.key == "Enter"){
        dismissKeyboard();
    }
}

Answer 5

首先，您将onkeydown = {keydownhandler}添加到一个react元素。每次按键时，这都会触发您的keydownhandler函数。例如：

<div className='example-class' onKeyDown={keyDownHandler}>

您可以这样设置您的功能：

const keyDownHandler = (
    event: React.KeyboardEvent<HTMLDivElement>
) => {
        if (event.code === 'ArrowDown') {
            // do something
        } else if (event.code === 'A') {
            // do something
        }
}