KeyboardAvoidingView未随键盘弹出上移TextInput问题排查

你的代码存在几个关键问题，导致TextInput始终被键盘遮挡：

• KeyboardAvoidingView的布局属性错误：你给它设置了justifyContent: "center"，这会强制内部元素居中显示，直接打乱了从上到下的正常布局逻辑，键盘弹出时自然无法正确调整输入框位置。
• FlatList未配置空间占比：FlatList没有设置flex:1，无法占据输入框之外的剩余屏幕空间，导致整个布局层级错乱，输入框的底部固定逻辑失效。
• Android端适配不足：仅设置behavior='height'不够，需要额外配置keyboardVerticalOffset来适配Android状态栏、导航栏的高度，确保键盘弹出时输入框能精准上移。

修复后的代码如下：

import React from 'react';
import { FlatList, KeyboardAvoidingView, Platform, SafeAreaView, Text, TextInput, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

function Messages() {
    // 适配Android端状态栏/导航栏的键盘偏移量，可根据设备调整数值
    const keyboardOffset = Platform.OS === 'android' ? 20 : 0;

    return (
        <KeyboardAvoidingView
            style={{ flex: 1 }}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            keyboardVerticalOffset={keyboardOffset}>
            <SafeAreaView style={{ flex: 1, flexDirection: "column" }}>
                {/* FlatList设置flex:1，占据输入框以外的全部空间 */}
                <FlatList
                    style={{ flex: 1 }}
                    data={[1,2,3,4,5,6,7,8,9]}
                    renderItem={() => <Text style={{ padding:15, borderBottomWidth:1, borderColor:'#eee' }}>test</Text>}
                />
                {/* 输入框容器固定在底部，优化样式贴近消息APP交互 */}
                <View style={{
                    flexDirection: "row",
                    padding:8,
                    backgroundColor:'#fff',
                    borderTopWidth:1,
                    borderColor:'#eee'
                }}>
                    <TextInput
                        style={{
                            height:40,
                            marginRight:8,
                            borderWidth:1,
                            borderColor:'#ddd',
                            borderRadius:20,
                            paddingHorizontal:12,
                            flex:1,
                        }}
                        placeholder="输入消息..."
                    />
                    <Icon
                        name={"send"}
                        size={25}
                        style={{ alignSelf:'center', marginHorizontal:8 }}
                    />
                </View>
            </SafeAreaView>
        </KeyboardAvoidingView>
    );
}

export default Messages;

额外说明：

• 移除了KeyboardAvoidingView的justifyContent: "center"，恢复默认的从上到下布局逻辑。
• 给FlatList添加style={{ flex:1 }}，确保它能撑满剩余屏幕空间。
• 为Android端配置了keyboardVerticalOffset，你可以根据实际设备的状态栏高度微调这个数值。
• 优化了输入框区域的样式，添加占位符和边框，更贴近消息类APP的交互体验。

内容的提问来源于stack exchange，提问作者Cheesy Chameleon