React Native打开键盘时白屏及内容上移问题求助

1. 修改Expo配置（app.json/app.config.js） #

直接在配置文件中指定键盘行为，阻止系统调整应用布局：

{
  "expo": {
    // 保留原有其他配置
    "ios": {
      // 保留原有iOS配置
      "keyboardBehavior": "overlay" // 设置iOS键盘以覆盖层形式弹出
    },
    "android": {
      // 保留原有Android配置
      "windowSoftInputMode": "adjustNothing" // 禁止Android系统调整应用布局
    }
  }
}

2. 调整组件代码 #

你原本使用的KeyboardAvoidingView设置了behavior={'height'}，这正是导致页面内容上移的核心原因。直接移除该属性，或者替换为普通View即可：

const App = () => {
  return (
    <Provider store={store}>
        //....
        <View style={{ flex: 1, backgroundColor: "black" }}>
          <View style={{ flex: 1, padding: 20, justifyContent:"center", alignItems:"center" }}>
            <TextInput placeholder="Enter Text" style={{backgroundColor:"red", padding: 20 }}/>
          </View>
        </View>
    </Provider>
  );
};

3. 解决键盘弹出时的白屏问题 #

白屏通常是键盘弹出瞬间布局重绘、背景未填充完整导致的，按以下方式处理：

• 确保根容器设置了明确的背景色（比如示例中的backgroundColor: "black"），避免默认白色背景露出
• 若仍存在白屏，可监听键盘状态事件，保证页面状态一致性（多数场景下设置根背景色即可解决）：

import { Keyboard, View } from 'react-native';
import { useEffect, useState } from 'react';

const App = () => {
  const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);

  useEffect(() => {
    const showHandler = Keyboard.addListener('keyboardDidShow', () => setIsKeyboardOpen(true));
    const hideHandler = Keyboard.addListener('keyboardDidHide', () => setIsKeyboardOpen(false));

    return () => {
      showHandler.remove();
      hideHandler.remove();
    };
  }, []);

  return (
    <Provider store={store}>
        //....
        <View style={{ flex: 1, backgroundColor: "black" }}>
          <View style={{ flex: 1, padding: 20, justifyContent:"center", alignItems:"center" }}>
            <TextInput placeholder="Enter Text" style={{backgroundColor:"red", padding: 20 }}/>
          </View>
        </View>
    </Provider>
  );
};

完成上述设置后，键盘会以覆盖层形式上下滑动，不会触发应用布局调整，同时也能解决弹出时的白屏问题。

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