У меня возникают проблемы с настройкой макета на Android, когда на экране появляется мягкая клавиатура в React-Native ⇐ Javascript

[Anonymous]

Я работаю над приложением-реагированием и использую «React-Cniate»: «0,73.6», и я сталкиваюсь с некоторыми проблемами пользовательского интерфейса, когда на экране появляется клавиатура на экране MessageInbox. Ниже приведен код для экрана: < /p>
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, TextInput, ActivityIndicator, FlatList, Alert, SafeAreaView, } from 'react-native';
import { COLORS } from '../../themes/palette';
import MainCommonHeader from '../../components/headers/MainCommonHeader';
import { moderateScale, scale, verticalScale } from 'react-native-size-matters/extend';

const NewInboxScreen = ({ route, navigation }) => {
const { data } = route.params || {};
const [filteredMessages, setFilteredMessages] = useState([]);
const [loading, setLoading] = useState(true);
const [messageBody, setMessageBody] = useState('');
const [sending, setSending] = useState(false); // Track sending state
const conversationNumber = data;

const sendSMS = async () => {
if (!messageBody.trim()) {
Alert.alert('Error', 'Message body cannot be empty!');
return;
}
setSending(true);
console.log(`Message sent to +${conversationNumber}:`, messageBody);

try {
setFilteredMessages((prevMessages) => [...prevMessages, newMessage]);
setMessageBody(''); // Clear the TextInput
setSending(false);
} catch (error) {
console.error('Error sending SMS:', error);
Alert.alert('Error', 'Failed to send SMS');
} finally {
setSending(false);
}
};

const renderItem = ({ item }) => {
const isOutGoing = item.sb === 'out';
return (


{!isOutGoing && }

{item.mb}

{new Date(item.sdt).toLocaleString()}

);
};

return (

navigation.goBack()}
/>

{loading ? (

) : (
index.toString()} // Unique key for each item
onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
onLayout={() => flatListRef.current?.scrollToEnd({ animated: true })} // Ensure scrolling on layout
/>
)}





sendSMS()}>





);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.OFFWHITE,
},
subContainer: {
flex: 1,
paddingHorizontal: scale(16),
paddingVertical: verticalScale(16),
},
itemContainer: {
padding: 16,
borderBottomWidth: 1,
borderColor: '#ccc',
},
text: {
fontSize: 16,
marginVertical: 2,
color: COLORS.DARK,
},
});

export default NewInboxScreen;
< /code>
Теперь на этом экране, когда появляется здесь клавиатура, тогда заголовок или, скажем, автоматически изменяется. Вы можете увидеть скриншоты ниже. это фактическая макет экрана перед открытием клавиатуры ». src = "https://i.sstatic.net/4hns9uhl.jpg"/>

[*] Это макет экрана после открытия клавиатура.


< /ol>
Вы можете видеть, что высота заголовка уменьшается при открытии клавиатуры.
также в моем in androidmanifest.xml < /code> У меня есть Android: WindowsoftinputMode = "AdleSustresize" < /code>
и когда я изменяю его на Android: WindowsOftInputMode = "AdvutionPan" < /code>, затем, когда появляется клавиатура, мой пользовательский интерфейс выглядит так:

Здесь вы можете видеть, что, когда появляется клавиатура, все нажимается в заголовке и входной короб под клавиатурой.
Я также пытался использовать QueyboardVoidingView, но она не работает, как ожидалось. Так что, пожалуйста, помогите здесь, как я могу решить эту проблему. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/794 ... appears-on