如何让KeyboardAvoidingView在多TextInput场景下正常工作，避免布局挤压

问题根因 #

布局堆叠的核心原因是inner样式中使用了justifyContent: "space-around"：当键盘唤起后，页面可视高度被压缩，space-around会动态缩小所有子元素的间距来适配剩余高度，最终导致输入框挤在一起，同时非滚动容器无法自动定位到当前激活的输入框。

解决方案 #

方案1：使用ScrollView支持滚动定位（最推荐） #

将内部普通View替换为ScrollView，让内容高度超过可视区域时可滚动，系统会自动将激活的输入框滚动到可视范围内：

1. 导入ScrollView组件
2. 替换TouchableWithoutFeedback下的普通View为ScrollView，添加keyboardShouldPersistTaps="handled"属性，避免点击其他输入框时键盘自动收起
3. 移除inner样式里的justifyContent: "space-around"，改为flexGrow: 1

修改后完整代码如下：

import React from 'react';
import {
    View,
    KeyboardAvoidingView,
    TextInput,
    StyleSheet,
    Text,
    Platform,
    TouchableWithoutFeedback,
    Button,
    Keyboard,
    ScrollView // 新增导入
} from 'react-native';

const KeyboardAvoidingComponent = () => {
    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            style={styles.container}
        >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                {/* 替换为ScrollView */}
                <ScrollView 
                    style={styles.inner}
                    contentContainerStyle={styles.contentContainer}
                    keyboardShouldPersistTaps="handled"
                >
                    <Text style={styles.header}>Header</Text>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <View style={styles.btnContainer}>
                        <Button title="Submit" onPress={() => null}/>
                    </View>
                </ScrollView>
            </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    inner: {
        flex: 1,
        paddingHorizontal: 24
    },
    // 新增contentContainer样式
    contentContainer: {
        paddingVertical: 24,
    },
    header: {
        fontSize: 36,
        marginBottom: 48
    },
    textInput: {
        height: 40,
        borderColor: "#000000",
        borderBottomWidth: 1,
        marginBottom: 36
    },
    btnContainer: {
        backgroundColor: "white",
        marginTop: 12
    }
});

export default KeyboardAvoidingComponent;

方案2：调整布局属性避免动态间距压缩 #

如果不需要滚动效果，直接移除inner样式中的justifyContent: "space-around"即可，输入框会保留固定的marginBottom间距，不会被动态压缩堆叠。

方案3：安卓端适配优化 #

如果安卓端仍存在异常，可尝试：

• 将KeyboardAvoidingView的behavior属性统一设置为padding
• 检查安卓项目android/app/src/main/AndroidManifest.xml中activity节点的windowSoftInputMode属性，设置为adjustResize

内容的提问来源于stack exchange，提问作者Tercé Nicolas