提问人:Brady Dowling 提问时间:11/17/2023 更新时间:11/18/2023 访问量:22
键盘覆盖仅在 Android 上使用 react-native-gifted-chat 进行聊天
Keyboard overlays chat on Android only with react-native-gifted-chat
问:
我正在使用 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,
},
});
};
我在这里做错了什么?我也尝试使用过一段时间,但在它最初不起作用之后,我在天才聊天文档中找到了部分,上面写着我认为我可以信任该插件来处理这个问题。是我误解了这应该如何工作,还是我实施错了?KeyboardAvoidingView
isKeyboardInternallyHandled (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
答:
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,
一旦我这样做了,它就会适当地调整大小,这样它就不会在键盘后面。
评论