Hoe krijg ik een hoogte van een toetsenbord in React-Native?

Ik gebruik React-Navigation in mijn app en de app bestaat uit StackNavigator met meerdere schermen, waarvan sommige schermen TextInput hebben met autoFocus={true}

Probleem:op deze schermen wanneer de component rendert, wordt de hoogte van het scherm ingesteld in de constructor:

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

Maar aangezien de autoFocusvan TextInput trueis, verschijnt het toetsenbord op dit scherm vrijwel onmiddellijk na de renderop het scherm , waardoor de component opnieuw wordt weergegeven vanwege de eventListener die is toegevoegd aan Keyboard in 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);
}

Dit heeft invloed op de prestaties en ik wil onnodige re-renders vermijden.

Vragen:
1. Is het mogelijk om de dynamische hoogte (afhankelijk van het apparaat) van het toetsenbord in de ScreenProps van React-Navigation in te stellen?
2. Is het mogelijk om hetzelfde te doen met de state.params van React-Navigation?
3. Is er een andere manier om dit probleem op te lossen, behalve het toepassen van KeyboardAvoidingView of deze module?

Antwoord 1, autoriteit 100%

Dit is wat ik deed:

Als de app een “Autorisatie-/Inlog-/Aanmeldscherm” heeft, dan:

1. Voeg in componentWillMount KeyboardListeners toe zoals hier:

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

2. Voeg autoFocustoe aan e-mail / telefoonnummer / elke andere “eerste” tekstinvoer op de pagina, zodat wanneer het scherm wordt geladen, het toetsenbord verschijnt.

3. In de functie _keyboardDidShow, die wordt gebruikt als KeyboardListener, doet u het volgende:

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

   Dimensions is een API van React-Native, vergeet niet om het te importeren, net zoals je een React-Native component importeert.

4. Vervolgens, terwijl u doorverwijst naar de volgende pagina, geeft u deze parameters door en vergeet niet om ze door te geven aan andere schermen om deze gegevens niet te verliezen:

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

Antwoord 2, autoriteit 78%

Ik had er ook een haak voor nodig, dus zo krijg ik de hoogte van het toetsenbord (grotendeels geïnspireerd door het andere antwoord), het codevoorbeeld staat in TypeScript:

import { useEffect, useState } from 'react';
import { Keyboard, KeyboardEvent } from 'react-native';
export const useKeyboard = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  function onKeyboardDidShow(e: KeyboardEvent) {
    setKeyboardHeight(e.endCoordinates.height);
  }
  function onKeyboardDidHide() {
    setKeyboardHeight(0);
  }
  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
    Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
    return () => {
      Keyboard.removeListener('keyboardDidShow', onKeyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', onKeyboardDidHide);
    };
  }, []);
  return keyboardHeight;
};

vervolgens in uw component:

 const keyboardHeight = useKeyboard();
  console.log(keyboardHeight);

Antwoord 3, autoriteit 12%

Voor degenen onder u die nog steeds op zoek zijn naar een antwoord op deze nu kunt u hooks gebruiken.

import { useKeyboard } from '@react-native-community/hooks'
//Then keyboard like this 
const keyboard = useKeyboard()
console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)

Antwoord 4, autoriteit 9%

Ik wil graag toevoegen aan de bovenstaande antwoorden dat het gebruik van keyboardWillShowen keyboardWillHidein plaats van keyboardDidShowen keyboardDidHideziet er veel beter uit. Het werkt gewoon sneller en ziet er daarom soepeler uit.