web-dev-qa-db-fra.com

Comment puis-je écouter les entrées au clavier dans React Native

J'ai un scanner Honeywell qui génère du texte lors de la numérisation des codes à barres .. Je peux l'utiliser comme "clavier" pour les saisies de texte, ce qui est très pratique car je n'ai aucune interface à utiliser . Mais il a l'inconvénient de devoir concentrer une entrée et d'afficher ainsi le clavier virtuel de l'appareil mobile, ce qui est inacceptable pour le projet sur lequel je travaille.

Existe-t-il un moyen d’analyser la valeur sans avoir à cibler une entrée? Je crois que l'écoute des événements keyPress ou autres serait la solution, stockant la valeur entrée dans une variable ailleurs que textInput.

S'il existe un meilleur moyen d'y parvenir, je suis tout ouïe!

reactjsreact-nativekeyboard-events
8
Lucas Bernardo

Ok, tout le monde a trouvé un moyen de faire cela sans trop devenir fou ..__ Ce n'est pas la solution la plus élégante, mais elle fait exactement ce dont j'ai besoin et n'ajoute pas grand chose au code.

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

...

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

Le nom du jeu ici était autoFocus et onFocus={() => Keyboard.dismiss()} />.

Maintenant, je vais utiliser https://www.npmjs.com/package/react-native-keyevent comme suggéré par @MattAft pour écouter les appuis sur les touches (malheureusement, ce paquet ne me donnera pas les données réelles du scanner. Il déclenchera toutefois l’événement keyDown) pour focaliser le TextInput lorsque le scanner lit quelque chose.

UPDATE Un collègue m'a un peu aidé avec cela il y a quelques jours lorsque nous avons eu le temps de refactoriser ce composant, et nous avons découvert qu'il y avait un auditeur appelé onKeyMultipleListener sur le paquet react-native-keyevent qui écoute non seulement plusieurs keyPresses simultanément, mais capture également l’entrée entière, c’est exactement ce dont nous avions besoin ici.

1
Lucas Bernardo

Je sais que react-native a un module de clavier pour contrôler les événements de clavier

Le module Clavier vous permet d'écouter les événements natifs et d'y réagir, ainsi que de modifier le clavier, par exemple en le supprimant.

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