React Native(Expo托管工作流)中如何阻止Android键盘弹出默认行为？

1. 禁用系统默认键盘调整行为 #

首先在项目根目录的app.json（或app.config.js）中配置Android的windowSoftInputMode，让系统不再自动干预页面布局：

{
  "expo": {
    "android": {
      "windowSoftInputMode": "adjustNothing"
    }
  }
}

这个配置会完全关闭系统的默认键盘调整逻辑，所有布局控制由开发者自行实现。

2. 页面级自定义键盘行为 #

针对不同页面，使用Expo提供的Keyboard API监听键盘状态，结合动态样式或动画实现自定义效果：

示例1：页面整体上移 #

在需要上移的页面中，监听键盘高度变化，通过transform属性调整容器位置：

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

const UpShiftScreen = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height);
    });
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <View 
      style={{ 
        flex: 1, 
        justifyContent: 'flex-end',
        transform: [{ translateY: -keyboardHeight }]
      }}
    >
      <TextInput placeholder="输入内容" style={{ height: 50, borderWidth: 1, margin: 20 }} />
    </View>
  );
};

export default UpShiftScreen;

示例2：页面高度缩小 #

在需要缩小的页面中，动态设置容器高度为屏幕高度减去键盘高度：

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

const ResizeScreen = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const screenHeight = Dimensions.get('window').height;

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height);
    });
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <View 
      style={{ 
        height: screenHeight - keyboardHeight,
        width: '100%',
        justifyContent: 'flex-end',
      }}
    >
      <TextInput placeholder="输入内容" style={{ height: 50, borderWidth: 1, margin: 20 }} />
    </View>
  );
};

export default ResizeScreen;

3. 灵活适配的补充方案 #

如果仅部分页面需要自定义行为，可以不全局配置windowSoftInputMode，而是针对单个页面使用KeyboardAvoidingView，通过指定不同的behavior属性快速实现需求：

• behavior="height"：对应系统的adjustResize（页面缩小）
• behavior="position"：对应系统的adjustPan（页面上移）
  同时可配合keyboardVerticalOffset调整偏移量，适配自定义导航栏等布局。

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