如何避免React Native中打开TextInput时Modal移位（Android端）

要保留Modal且不让UI偏移，核心是避免KeyboardAvoidingView对Modal的干扰，同时调整Modal内部布局和系统软键盘设置，具体步骤如下：

1. 移除外层不必要的KeyboardAvoidingView #

你的代码里把Modal嵌套在KeyboardAvoidingView里，而behavior="position"会让整个视图随键盘位置移动，这是导致移位的主要原因。直接去掉外层的KeyboardAvoidingView，或者把Modal移到它外面。

2. 调整Modal内部布局，避免绝对定位偏移 #

原代码中TextInput用了top:100的绝对定位，这种方式在键盘弹出时容易出现布局错乱。改用相对于底部的定位或flex布局来固定元素位置，稳定性更强。

3. 配置Android系统软键盘模式（可选但推荐） #

在Android项目的AndroidManifest.xml中，给对应的Activity添加android:windowSoftInputMode="adjustPan"，防止系统自动调整窗口布局：

<activity
  android:name=".MainActivity"
  ...
  android:windowSoftInputMode="adjustPan">

修改后的完整代码 #

import React from 'react';
import { View, TextInput, Modal, StyleSheet } from 'react-native';

const App = () => {
    return (
        <View style={{ flex: 1 }}>
            <Modal
                animationType="none"
                transparent={true}
                visible={true}
                keyboardShouldPersistTaps="handled"
            >
                <View style={styles.modalContainer}>
                    <View style={styles.bottomPanel} />
                    <View style={styles.inputWrapper}>
                        <TextInput
                            style={styles.inputIncomeDescription}
                            placeholder="Enter description"
                            value="789"
                        />
                    </View>
                </View>
            </Modal>
        </View>
    );
};

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        width: '100%',
    },
    bottomPanel: {
        backgroundColor: '#ebf1f4',
        width: '100%',
        height: 400,
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        position: 'absolute',
        bottom: 0,
    },
    inputWrapper: {
        position: 'absolute',
        bottom: 420,
        width: '100%',
        alignItems: 'center',
    },
    inputIncomeDescription: {
        backgroundColor: 'white',
        padding: 5,
        borderRadius: 15,
        width: 300,
        height: 40,
        textAlign: 'center',
    },
});

export default App;

关键改动说明 #

• 移除外层KeyboardAvoidingView，消除其对Modal布局的干扰
• 将Modal内部容器设置为justifyContent: 'flex-end'，让底部面板固定在屏幕底部
• 输入框改用bottom定位替代原有的top，避免键盘弹出时的位置偏移
• 添加keyboardShouldPersistTaps="handled"优化交互体验

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