web-dev-qa-db-ja.com

React Nativeでキーボード入力を聞くにはどうすればよいですか？

バーコードをスキャンするときにテキストを出力するHoneywellスキャナーがあります。テキスト入力の「キーボード」として使用できます。何もインターフェースする必要がないため、非常に便利です。ただし、入力に焦点を合わせる必要があり、モバイルデバイスの仮想キーボードを表示する必要があるという欠点があります。これは、私が取り組んでいるプロジェクトには受け入れられません。

入力に集中せずに値をスキャンする方法はありますか？ keyPressイベントなどをリッスンすることは、textInput以外の変数に入力された値を格納する方法だと思います。

これを達成するためのより良い方法があれば、私はすべて耳です！

reactjsreact-nativekeyboard-events
12
Lucas Bernardo

さて、皆さん、あまり夢中にならないでこれを行う方法を見つけました。これは最もエレガントなソリューションではありませんが、私が必要としていることを正確に実行し、コードに多くを追加することはありません。

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

...

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

ここでのゲームの名前はautoFocusとonFocus={() => Keyboard.dismiss()} />でした。

@MattAftがキープレスをリッスンするために提案したように https://www.npmjs.com/package/react-native-keyevent を使用します（残念ながら、このパッケージでは実際のスキャナーは提供されませんただし、スキャナーが何かを読み取ったときに、KeyDownイベントをトリガーしてTextInputをフォーカスします。

[〜＃〜] update [〜＃〜]このコンポーネントをリファクタリングする時間があるときに、同僚がこれを少し手伝ってくれました、そして、複数の同時keyPressesをリッスンするだけでなく、入力全体をキャプチャするreact-native-keyeventパッケージにonKeyMultipleListenerと呼ばれるリスナーがあることを発見しました。これは、まさにここで必要なものです。

3
Lucas Bernardo

反応ネイティブには、制御するキーボードモジュールがあることを知っています キーボードイベント

キーボードモジュールを使用すると、ネイティブイベントをリッスンしてそれらに反応するだけでなく、キーボードを閉じるなどの変更をキーボードに加えることができます。

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

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

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

  _keyboardDidShow () {
    alert('Keyboard Shown');
  }

  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}
1
Paul McLoughlin