React native 赠送聊天功能,当我从聊天界面返回时,Android 的按钮导航栏覆盖了底部的标签

作者: sofian-sunny创建于 2026年7月14日更新于 2026年8月2日

<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? verticalScale(80) : 0} > <View style={{ flex: 1 }}> {currentChatListId ? ( <GiftedChat alwaysShowSend messages={messages} onSend={onSend} user={{ _id: uid }} wrapInSafeArea={false} isKeyboardInternallyHandled={false} bottomOffset={0} minInputToolbarHeight={verticalScale(56)} listViewProps={{ showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: 'handled', contentContainerStyle: { paddingBottom: verticalScale(8), }, }} textInputProps={{ multiline: true, style: { flex: 1, minHeight: verticalScale(36), maxHeight: verticalScale(90), borderRadius: scale(18), paddingTop: Platform.OS === 'android' ? verticalScale(6) : verticalScale(8), paddingBottom: Platform.OS === 'android' ? verticalScale(6) : verticalScale(8), paddingHorizontal: scale(12), textAlignVertical: 'center', color: colors.gray_black, }, }} renderSend={renderSend} renderInputToolbar={toolbarProps => ( <InputToolbar {...toolbarProps} containerStyle={{ borderTopWidth: 0, marginHorizontal: scale(10), // Fix Android 3-button navigation overlap marginBottom: Platform.OS === 'android' ? isKeyboardVisible ? verticalScale(100) : Math.max(bottomInset, verticalScale(12)) : verticalScale(8), borderRadius: scale(22), backgroundColor: 'rgba(204,204,204,0.25)', minHeight: verticalScale(46), paddingHorizontal: scale(6), paddingVertical: verticalScale(4), justifyContent: 'center', }} primaryStyle={{ alignItems: 'center', minHeight: verticalScale(42), }} /> )} renderMessageText={messageProps => ( <MessageText …

内容来源: FaridSafi/react-native-gifted-chat