Я успешно использую keobodevoidingview на других экранах этого мобильного (iOS) приложения, но я подозреваю, что есть что -то в общей планировке этого экрана, что заставляет его не функционировать, как ожидалось. Нажатие на ввод открывает клавиатуру, но содержимое не сдвигается. Весь этот компонент «JournalEntryForm» отображается внутри реакционного «модального».
const JournalEntryForm: React.FC = ({
journalEntry,
currentState,
currentQuestion,
currentAnswer,
isSubmitting,
isFollowUpsComplete,
mode,
questions,
onClose,
onAnswerChange,
onSubmitAnswer,
onSubmitFollowUp,
onNextQuestion
}) => {
const scrollViewRef = useRef(null);
const inputRef = useRef(null);
const [isInputFocused, setIsInputFocused] = useState(false);
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
return (
Back
Journal Entry
{journalEntry.date.toDate().toLocaleDateString(undefined, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
})}
{/* Conversation history */}
{journalEntry && (
{/* Show all previous questions and their conversations */}
)}
{/* Input area and buttons - only show if not complete */}
{currentState !== 'complete' && (
{/* Input area */}
{/* Navigation buttons */}
)}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F8F9FA',
},
scrollContent: {
padding: spacing.lg,
justifyContent: 'flex-end',
flex: 1,
},
headerContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 16,
paddingTop: 60,
paddingBottom: 16,
backgroundColor: '#fff',
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
backButton: {
flexDirection: 'row',
alignItems: 'center',
padding: 8,
width: 80,
},
backButtonText: {
fontSize: 16,
color: '#333',
marginLeft: 4,
},
headerTitle: {
fontSize: 20,
fontWeight: '600',
color: '#333',
textAlign: 'center',
flex: 1,
},
headerFiller: {
width: 80,
},
dateContainer: {
paddingHorizontal: spacing.md,
paddingVertical: spacing.sm,
backgroundColor: '#f8f9fa',
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
dateText: {
fontSize: responsiveFontSize(14),
color: '#666',
textAlign: 'center',
},
questionContainer: {
backgroundColor: '#fff',
borderRadius: 12,
padding: spacing.lg,
marginBottom: spacing.lg,
//flex: 1,
},
conversationContainer: {
marginBottom: spacing.lg,
},
inputContainer: {
marginTop: spacing.md,
},
input: {
backgroundColor: '#F5F5F5',
borderRadius: 20,
padding: spacing.md,
fontSize: responsiveFontSize('md'),
minHeight: 40,
maxHeight: 120,
textAlignVertical: 'center',
marginBottom: spacing.md,
},
submitButton: {
backgroundColor: '#FFB703',
borderRadius: 20,
padding: spacing.md,
width: '100%',
alignItems: 'center',
},
submitButtonText: {
color: '#FFFFFF',
fontSize: responsiveFontSize('md'),
fontWeight: 'bold',
},
navigationContainer: {
marginTop: spacing.lg,
alignItems: 'flex-end',
},
nextButton: {
backgroundColor: 'transparent',
borderRadius: 8,
padding: spacing.sm,
paddingHorizontal: spacing.sm,
},
nextButtonText: {
color: '#666',
fontSize: responsiveFontSize('sm'),
fontWeight: '500',
textDecorationLine: 'underline',
},
typingIndicator: {
marginBottom: spacing.md,
alignItems: 'flex-start',
},
disabledButton: {
backgroundColor: '#cccccc',
opacity: 0.7,
},
disabledButtonText: {
color: '#888888',
},
disabledInput: {
backgroundColor: '#f0f0f0',
color: '#999',
},
});
Подробнее здесь: https://stackoverflow.com/questions/796 ... sted-views
