Anonymous
Пустое пространство между панелью навигации и TextInput после закрытия клавиатуры при использовании KeyboardAvoidingView
Сообщение
Anonymous » 10 ноя 2025, 01:37
Я использую KeyboardAvoidingView в React Native (экспо). Все в порядке, пока клавиатура не закрыта, а после закрытия клавиатуры остается постоянное пустое пространство. Скриншоты вы можете увидеть ниже.
Код:
Код: Выделить всё
export default function ChatPage({ chatId, other, onBack }) {
return (
{!loaded ? (
) : (
listRef.current.scrollToEnd({ animated: true })}
data={messages}
keyExtractor={(item) => item.id}
renderItem={renderItem}
onScroll={onScroll}
keyboardShouldPersistTaps="always"
ListFooterComponent={loadingOlder ? : null}
onEndReached={onEndReached}
/>
)}
{otherTyping && (
Typing...
)}
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: COLORS.backgroundDark },
header: { paddingHorizontal: 12, paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#1d1f24', flexDirection: 'row', alignItems: 'center', gap: 8 },
backBtn: { paddingHorizontal: 4, paddingVertical: 4, marginRight: 2 },
headerAvatar: { width: 34, height: 34, borderRadius: 17, marginRight: 6, backgroundColor: '#333' },
headerTitle: { color: COLORS.textLight, fontSize: 18, fontWeight: '600', flexShrink: 1 },
empty: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: COLORS.backgroundDark },
emptyText: { color: COLORS.textSecondary },
typingRow: { paddingHorizontal: 16, paddingVertical: 4 },
typingText: { color: COLORS.textSecondary, fontStyle: 'italic', fontSize: 12 },
inputBarWrap: { backgroundColor: COLORS.backgroundDark },
});
Скриншоты:
Состояние 1 (клавиатура не открыта): здесь
Состояние 2 (клавиатура открыта и закрыта): здесь
Подробнее здесь:
https://stackoverflow.com/questions/798 ... when-using
1762727876
Anonymous
Я использую KeyboardAvoidingView в React Native (экспо). Все в порядке, пока клавиатура не закрыта, а после закрытия клавиатуры остается постоянное пустое пространство. Скриншоты вы можете увидеть ниже. Код: [code]export default function ChatPage({ chatId, other, onBack }) { return ( {!loaded ? ( ) : ( listRef.current.scrollToEnd({ animated: true })} data={messages} keyExtractor={(item) => item.id} renderItem={renderItem} onScroll={onScroll} keyboardShouldPersistTaps="always" ListFooterComponent={loadingOlder ? : null} onEndReached={onEndReached} /> )} {otherTyping && ( Typing... )} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: COLORS.backgroundDark }, header: { paddingHorizontal: 12, paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#1d1f24', flexDirection: 'row', alignItems: 'center', gap: 8 }, backBtn: { paddingHorizontal: 4, paddingVertical: 4, marginRight: 2 }, headerAvatar: { width: 34, height: 34, borderRadius: 17, marginRight: 6, backgroundColor: '#333' }, headerTitle: { color: COLORS.textLight, fontSize: 18, fontWeight: '600', flexShrink: 1 }, empty: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: COLORS.backgroundDark }, emptyText: { color: COLORS.textSecondary }, typingRow: { paddingHorizontal: 16, paddingVertical: 4 }, typingText: { color: COLORS.textSecondary, fontStyle: 'italic', fontSize: 12 }, inputBarWrap: { backgroundColor: COLORS.backgroundDark }, }); [/code] Скриншоты: Состояние 1 (клавиатура не открыта): здесь Состояние 2 (клавиатура открыта и закрыта): здесь Подробнее здесь: [url]https://stackoverflow.com/questions/79815065/empty-space-between-navigator-bar-and-textinput-after-keyboard-closed-when-using[/url]