web-dev-qa-db-fra.com

Comment obtenir une hauteur de clavier dans React-Native?

J'utilise React-Navigation dans mon application et l'application consiste en StackNavigator avec plusieurs écrans, dont certains ont TextInput avec autoFocus={true}

Problème: sur ces écrans lors du rendu du composant, la hauteur de l'écran est définie dans le constructeur:

constructor(props) {
    super(props);
    this.state = { 
        height: Dimensions.get('window').height,
    };
}

Mais, puisque le autoFocus de TextInput est true, le clavier de cet écran s’affiche presque instantanément après le rendu , ce qui provoque la restitution du composant en raison de l'événement eventListener ajouté au clavier dans ComponentWillMount:

 componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow.bind(this)
    );
}

keyboardWillShow(e) {
    this.setState({
        height:
            Dimensions.get("window").height * 0.9 - e.endCoordinates.height
    });
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

Cela affecte les performances et je voudrais éviter les rediffusions inutiles.

Questions:
1. Est-il possible de définir la hauteur dynamique (en fonction du périphérique) du clavier dans les ScreenProps de React-Navigation?
2. Est-il possible de faire la même chose avec les state.params de React-Navigation?
3. Existe-t-il un autre moyen de résoudre ce problème, mis à part l'application de KeyboardAvoidingView ou ce module ?

javascriptreact-nativekeyboardreact-navigation
28
Eduard

C'est ce que j'ai fait:

Si l'application comporte "Écran d'autorisation/connexion/inscription", alors:

  1. Dans le composantWillMount, ajoutez KeyboardListeners comme expliqué ici :

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);

  2. Ajoutez autoFocus à un courrier électronique/à un numéro de téléphone/à un autre "premier" TextInput sur la page, de sorte que le clavier s’affiche au chargement de l’écran.

  3. Dans _keyboardDidShow fonction utilisée comme KeyboardListener, procédez comme suit:

    _keyboardDidShow(e) {
    this.props.navigation.setParams({
        keyboardHeight: e.endCoordinates.height,
        normalHeight: Dimensions.get('window').height, 
        shortHeight: Dimensions.get('window').height - e.endCoordinates.height, 
    }); 
}

    Dimensions est une API de React-Native, n'oubliez pas de l'importer comme vous importez n'importe quel composant React-Native.

  4. Après cela, lors de la redirection vers la page suivante, transmettez ces paramètres et n'oubliez pas de continuer à les transmettre à d'autres écrans afin de ne pas perdre ces données:

    this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });
52
Eduard