Question

这是 Android 的 reactive-native 问题。

当TextInput处于焦点状态时，如何处理Android中的后退按钮？如果TextInput处于焦点状态，则BackHandler.addEventListener('hardwareBackPress'. () => {})不会捕获任何事件。它会自动关闭键盘。

（实际上，我想要实现的是在按下“后退”按钮并且关闭键盘的情况下删除光标）

您可以玩this世博会小吃来了解我在说什么：

Answer 1

我相信这是正确的行为，但是要做出所需的操作，您可能会发现键盘本身隐藏了，而不是使用Keyboard（位于https://facebook.github.io/react-native/docs/keyboard的文档）

import * as React from 'react';
import { Keyboard } from 'react-native';

class MyComponent extends React.Component {
  componentDidMount() {
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove();
  }

  keyboardDidHide = () => {
      this.input.blur();
  };

    //Rest of component...

}

与使用TextInput中的onKeyPress事件相比，我更喜欢这种方法，因为onKeyPress不会读取硬件键盘的后退键，因此，如果用户使用的设备带有硬件后退按钮（例如某些Android设备），则onKeyPress将无法工作，这样可以提供更一致的体验。

Answer 2

您可以直接在TextInput上处理它，而不要使用BackHandler。您可以通过onKeyPress道具

来完成此操作

constructor(props){
  super(props)
  this.inputRef = React.createRef()
}

<TextInput
  onKeyPress={({ nativeEvent }) => {
    if(nativeEvent.key === 'Backspace'){
      //your code
      // if you want to remove focus then you can use a ref
      Keyboard.dismiss();
      this.inputRef.blur()
    }
  }}
  ref={this.inputRef}
/>

还要特别注意的是，在Android上，此事件仅会在软件键盘上触发，因此，如果您在模拟器上运行并使用计算机键盘上的退格键，则此操作将无效。

Answer 3

@Danilo答案确实有效，但是必须将其应用于所有文本输入。最后，我稍作改动就使用了Danilo的解决方案。

Keyboard.dismiss()不会模糊任何活动的TextInput，因此在keyboardDidHide事件中，我仅调用Keyboard.dismiss（）（尽管只是通过按后退按钮来关闭键盘）。我只需要将此添加到我的主要组件中即可。

import * as React from 'react';
import { Keyboard } from 'react-native';

class MyComponent extends React.Component {
  componentDidMount() {
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove();
  }

  keyboardDidHide = () => {
      Keyboard.dismiss();
  };

    //Rest of component...

}

您可以在this世博会小吃中试用该解决方案。

如果您的应用具有多个onSubmitEditing集中在下一个TextInput上的TextInput，这就是我的工作方式：

  ...

  keyboardDidHide = () => {
      this.keyboardTimeout = setTimeout(() => Keyboard.dismiss(), 300)
  };

  keyboardDidShow = () => {
      clearTimeout(this.keyboardTimeout)
  };

  ...

TexInput聚焦时如何处理后退按钮

3 个答案: