React Native bouton fait au-dessus du clavier

Question

Je veux faire un bouton "Terminé" au-dessus du clavier.

Et quand je clique sur "Terminé", le clavier est masqué.

Existe-t-il une bibliothèque ou une méthode ?

Merci.

(J'ai déjà trouvé une bibliothèque -> https://www.npmjs.com/package/react-native-keyboard-done-button Mais cela ne fonctionne pas)

Answer 1

Pour le clavier numérique et le pavé numérique :

et il semble que vous n'ayez pas besoin de bibliothèque returnKeyType='done' works with "number-pad" and "numeric" on v0.47.1

pour un clavier normal, vous pouvez regarder ceci :

https://github.com/ardaogulcan/react-native-keyboard-accessory

et

https://github.com/douglasjunior/react-native-keyboard-manager

Le fil Github que vous devez consulter :

https://github.com/facebook/react-native/issues/1190

et

https://github.com/facebook/react-native/issues/641

J'espère que cela vous aidera

Answer 2

Vous pouvez utiliser le composant KeyboardAvoidingView de React-native en tant que

<KeyboardAvoidingView keyboardVerticalOffset={50}>
//View you want to be moved up when keyboard shows.
</KeyboardAvoidingView>

keyboardVerticalOffset={50}

est la marge entre le clavier et la vue, qui sera la hauteur de la vue ou du bouton que vous souhaitez. J'espère que cela vous aidera.

Edit : la meilleure façon de faire, et la plus personnalisable je pense, est d'écouter les événements du clavier et de changer la position absolue du composant que vous voulez au-dessus du clavier, en fonction de ces événements.

import {..,Keyboard} from "react-native";

componentDidMount () {

        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',(event)=>this.keyboardDidShow(event) );
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',(event)=>this.keyboardDidHide(event) );
      }

      keyboardDidShow = (event) => {
        //   console.log("keyboard show",event)

            this.setState({keyboardShow:true,keyboardHeight:event.endCoordinates.height}) //<<You got the keyboard height 

      }

      keyboardDidHide = (event) => {
        // console.log("keyboard hide",event)
        this.setState({keyboardShow:false,keyboardHeight:0})
    }

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

maintenant, pour l'afficher au-dessus du clavier, vous pouvez donner du style à votre composant bouton comme ceci

style={{position:"absolute",bottom:this.state.keyboardHeight+20,right:0}}

et si vous voulez le cacher (bouton Done) il suffit de conditionner le JSX avec l'état keyboardShow.

Answer 3

Ce n'est pas une bibliothèque ou quelque chose de spécial. C'est juste une vue qui se déplace vers le haut avec le clavier.

Lire cet article - https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580#.gd37tn1wx

Il vous montre différentes façons de faire respecter les éléments du clavier.