Android Expo 上的 React Native Gifted Chat 输入被键盘覆盖

Question

我正在为我的应用程序聊天使用 react-native gifted chat。但是文本输入被键盘遮住了，所以我看不到我在输入什么。

我使用的是 react-native 版本 0.60.10。世博会版本 32.0.13。 Android基于phone进行测试。我尝试了使用 keyboardAvoidingView 和 KeyboardSpacer 的解决方案，但它仍然无法正常工作。

期待听到任何建议。任何建议都会非常好。 This is screenshot

源代码

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 Link

轻松修复

还有一些用户通过删除 forceGetKeyboardHeight

来解决这个问题

More information

Android Expo 上的 React Native Gifted Chat 输入被键盘覆盖

React Native Gifted Chat on Expo on Android input is covered by keyboard

javascript

reactjs

react-native

react-native-android

expo