React Native Gifted Chat on Expo на Android ввод покрыт клавиатурой

Question

Я использую одаренный чат для своего приложения. Но ввод текста покрыт клавиатурой, поэтому я не вижу, что набираю.

Я использую собственную версию реакции 0.60.10. Экспо версия 32.0.13. Android телефон для тестирования. Я пробовал решения с клавиатурой AvoidingView и KeyboardSpacer, но они все еще не работали.

С нетерпением жду любых советов. Любой совет был бы очень хорош. Это скриншот

Исходный код

render() {
    const {navigation} = this.props;
    return (
        <>
            <HeaderBack headerWrapper={{height: 80}} headerSubWrapper={{marginTop: 30}} navigation={navigation}/>
                <GiftedChat
                    style={{paddingHorizontal: 20}}
                    isTyping={true}
                    messages={this.state.messages}
                    onSend={messages => this.onSend(messages)}
                    user={{
                        _id: 1,
                    }}
                />
        </>
    );
}

Answer 1

Попробуйте этот обновленный код

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

}

_keyboardDidShow = (e) => {
    let keyboardHeight = e.endCoordinates.height;
    this.setState({
        minInputToolbarHeight: keyboardHeight + 45,
    });
}

_keyboardDidHide = () => {
    this.setState({
        minInputToolbarHeight: 45,
    });
}

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

}

render() {
    const {navigation} = this.props;

    let platformConf = Platform.OS === 'android' ? {
        minInputToolbarHeight: this.state.minInputToolbarHeight,
        bottomOffset: 0,
    } : {};

    return (
        <GiftedChat
            style={{flex: 1}}
            messages={this.state.messages}
            onSend={messages => this.onSend(messages)}
            onInputTextChanged={(text) => this._checkForMentions(text)}
            keyboardShouldPersistTaps='never'
            {...platformConf}
            user={{
                        _id: 1,
                    }}/>
    );
}

Если вышеуказанный метод не работает, вы можете легко исправить, используя react-native-keyboard-spacer Ссылка

Также некоторые пользователи исправляют это, удаляя forceGetKeyboardHeight

Дополнительная информация