React Native Android：如何同时配置adjustPan与adjustResize？

我完全懂你这个痛点：单个输入框页面用adjustPan能保住TabBar不被键盘遮挡，但多输入框的注册页用这个模式就没法滚动；换adjustResize虽然能正常滚动，可TabBar又会被键盘顶得看不见。其实核心思路就是针对不同页面动态切换windowSoftInputMode，下面是具体的实现步骤：

1. 先设置全局默认模式 #

首先在AndroidManifest.xml里把默认的windowSoftInputMode设为adjustResize，这样像注册页这类需要滚动的页面就能正常工作：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize"
  <!-- 保留你已有的其他配置项 -->
>
</activity>

2. 编写原生模块实现动态切换 #

我们需要一个简单的原生模块，让React Native代码能调用Android的API修改输入模式：

步骤2.1 创建KeyboardAdjustModule #

在你的Android项目src/main/java/[你的包名]目录下新建KeyboardAdjustModule.java文件：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class KeyboardAdjustModule extends ReactContextBaseJavaModule {
    public KeyboardAdjustModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        // 这个名称要和React Native里调用的一致
        return "KeyboardAdjust";
    }

    @ReactMethod
    public void setAdjustPan() {
        // 切换为adjustPan模式
        getCurrentActivity().getWindow().setSoftInputMode(
            android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN
        );
    }

    @ReactMethod
    public void setAdjustResize() {
        // 切回adjustResize模式
        getCurrentActivity().getWindow().setSoftInputMode(
            android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
        );
    }
}

步骤2.2 注册这个模块 #

打开MainApplication.java，在getPackages()方法里添加模块注册逻辑：

import com.yourpackage.KeyboardAdjustModule; // 替换成你的实际包名
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    
    // 添加自定义模块
    packages.add(new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new KeyboardAdjustModule(reactContext));
            return modules;
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    });
    
    return packages;
}

3. 在React Native页面中使用 #

回到RN代码，在需要用adjustPan的单个输入框页面里，通过useEffect在页面挂载时切换模式，卸载时切回默认：

import { useEffect } from 'react';
import { NativeModules, View, TextInput } from 'react-native';

const { KeyboardAdjust } = NativeModules;

const SingleInputScreen = () => {
  useEffect(() => {
    // 进入页面时设置为adjustPan，避免TabBar被键盘遮挡
    KeyboardAdjust.setAdjustPan();
    
    // 离开页面时切回adjustResize，不影响其他页面
    return () => {
      KeyboardAdjust.setAdjustResize();
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <TextInput placeholder="单个输入框" style={{ borderWidth: 1, padding: 10 }} />
      {/* 此时键盘弹出时整个页面上移，TabBar不会被遮挡 */}
    </View>
  );
};

export default SingleInputScreen;

而注册页这类多输入框页面不需要做任何改动，默认的adjustResize会让页面自动调整高度，ScrollView可以正常滚动，完全不受影响。

为什么这个方案可行？ #

• adjustResize会重新计算页面的可用高度，让ScrollView的可滚动区域适配键盘弹出后的空间，所以多输入框页面能正常滚动；
• adjustPan会将整个窗口（包括TabBar）向上平移，保证TabBar不会被键盘遮挡，适合单个输入框的场景；
• 通过动态切换模式，我们让两种模式的优势分别作用在对应的页面上，完美解决你的需求。

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