React Native Gifted Chat on Expo on Android 输入被键盘覆盖答案

【问题标题】：React Native Gifted Chat on Expo on Android input is covered by keyboardReact Native Gifted Chat on Expo on Android 输入被键盘覆盖
【发布时间】：2020-03-02 06:08:12
【问题描述】：

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

我正在使用 react-native 版本 0.60.10。世博会版本 32.0.13。用于测试的基于 Android 的手机。我尝试了使用 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,
                    }}
                />
        </>
    );
}

【问题讨论】：

你应该调整聊天组件的大小，当它获得焦点时
在此处附上您的聊天组件代码，并附上样式

标签： javascript reactjs react-native react-native-android expo

【解决方案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

【讨论】：

您的解决方案不起作用，但 forceGetKeyboardHeight 似乎是个问题。谢谢我通过您提供的链接解决了。