Tastatur versteckt Inhalte für Android reagieren Native Webview

Question

Ich verwende React Native <WebView> Komponente.

Die documentation hat keine Erwähnung, wie mit der Tastatur die Webansicht versteckt, wenn der HTML-Webview eine <input> enthält, die in Android konzentriert wird.

Hat es jemand geschafft, dies zu lösen? Ich habe eine Bibliothek gefunden, die für normale <View> zu funktionieren scheint, aber keine <WebView>.

Answer 1

Haben Sie darüber nachgedacht, auf Ereignisse auf Systemebene für das Erscheinen und Verschwinden der Tastatur zu reagieren und die Größe des WebView entsprechend anzupassen?

Es gibt eine alte Frage darüber, wie man damit umgeht, ob es relevant ist oder nicht. Diese Antwort zeigt insbesondere, wie Tastaturereignisse gehandhabt werden. https://stackoverflow.com/a/33585501/1403

DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{ 
    if (!frames.endCoordinates) return; 
    this.setState({keyboardSpace: frames.endCoordinates.height}); 
}); 
DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{ 
    this.setState({keyboardSpace:0}); 
}); 

könnten Sie den frames.endCoordinates.height Wert verwenden, um die Höhe Ihres WebView zu verändern, dass der Inhalt hinter der Tastatur ist nicht verborgen zu gewährleisten.

Answer 2

Nur Bewusstsein, dass dies auch einfach mit react-native-keyboard-spacer erreicht werden kann, wenn Sie nicht für komplizierte Tastatursteuerung sind.

import KeyboardSpacer from 'react-native-keyboard-spacer'; 

class DemoApp extends Component { 
    render() { 
    return (
     <View> 
     <WebView ... /> 
     <KeyboardSpacer/> 
     </View> 
    ); 
    } 
}