键盘覆盖仅在 Android 上使用 react-native-gifted-chat 进行聊天

Keyboard overlays chat on Android only with react-native-gifted-chat

提问人:Brady Dowling 提问时间:11/17/2023 更新时间:11/18/2023 访问量:22

问:

我正在使用 react-native-gifted-chat,它说它默认处理键盘重叠问题,但它不适用于我在 Android 上。在iOS上,它完全可以正常工作。这是我的代码:

    return (
        <View style={styles.outerContainer}>
            <View style={styles.container}>
                <GiftedChat
                    messages={messages}
                    onSend={(messages) => onSend(messages)}
                    onQuickReply={handleQuickReply}
                    user={{
                        _id: 1,
                    }}
                    renderBubble={(props) => (
                        <Bubble
                            {...props}
                            textStyle={{
                                right: { color: theme.colors.onTertiary },
                                left: { color: theme.colors.onSurface },
                            }}
                            wrapperStyle={{
                                right: {
                                    backgroundColor: theme.colors.primary,
                                },
                                left: { backgroundColor: theme.colors.surface },
                            }}
                        />
                    )}
                    isTyping={isTyping}
                    renderActions={(actionsProps) =>
                        keyboardOpen && (
                            <View
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    marginBottom: 15,
                                }}
                            >
                                <Entypo
                                    name="chevron-left"
                                    size={20}
                                    color="grey"
                                    onPress={Keyboard.dismiss}
                                />
                            </View>
                        )
                    }
                />
            </View>
        </View>
    );
};

const getStyles = (theme: MD3Theme) => {
    return StyleSheet.create({
        outerContainer: {
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: theme.colors.background,
        },
        container: {
            height: Dimensions.get("window").height * 0.85,
            // marginTop: "10%",
            width: "95%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "flex-start",
            gap: 20,
        },
    });
};

我在这里做错了什么?我也尝试使用过一段时间,但在它最初不起作用之后,我在天才聊天文档中找到了部分,上面写着我认为我可以信任该插件来处理这个问题。是我误解了这应该如何工作,还是我实施错了?KeyboardAvoidingViewisKeyboardInternallyHandled (Bool) - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is true

react-native expo react-native-gifted-chat

评论


答:

0赞 famfamfam 11/17/2023 #1

您是否在AndroidManifest中设置了keyboardmode?

android:windowSoftInputMode="adjustPan"
0赞 Brady Dowling 11/18/2023 #2

设置该容器的高度正在扼杀我的调整大小。所以我不得不改变这一行:

height: Dimensions.get("window").height * 0.85,

对此:

flex: 1,

一旦我这样做了,它就会适当地调整大小,这样它就不会在键盘后面。