React Native 0.70.4中Material Top Tabs首次聚焦TextInput时键盘闪退问题

• 技术栈："react-native": "0.70.4" + @react-navigation/material-top-tabs
• 场景：自定义底部弹窗内嵌顶部标签页
• 异常：标签页数量≥3时，点击第2个标签页的TextInput，首次触发键盘弹出后立即关闭，再次点击恢复正常；其余标签页功能无异常

底部弹窗标签页示例（首次点击TextInput时的异常状态）：

第二次点击TextInput后的正常状态：

• 尝试过的无效方案：设置android:windowSoftInputMode="adjustNothing"，但会导致useEffect和键盘监听器失效

1. 修复标签页容器焦点抢占问题 #

给MaterialTopTabs的外层容器添加pointerEvents="box-none"，避免标签页切换时的焦点冲突：

<View style={{ flex: 1 }} pointerEvents="box-none">
  <MaterialTopTabs.Navigator>
    {/* 各标签页屏幕组件 */}
  </MaterialTopTabs.Navigator>
</View>

2. 手动稳定TextInput焦点 #

在第二个标签页的TextInput中，通过useRef手动控制焦点，延迟确保焦点稳定：

import { useRef, useState } from 'react';
import { TextInput } from 'react-native';

const Test2Tab = () => {
  const inputRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);

  return (
    <TextInput
      ref={inputRef}
      onFocus={() => {
        setIsFocused(true);
        setTimeout(() => inputRef.current?.focus(), 100);
      }}
      onBlur={() => setIsFocused(false)}
      placeholder="søk"
      style={{ padding: 10, borderWidth: 1 }}
    />
  );
};

export default Test2Tab;

3. 软键盘模式兼容方案 #

放弃adjustNothing，改用adjustPan配合键盘感知滚动组件，同时保留键盘监听能力：

1. 安装依赖：npm install react-native-keyboard-aware-scroll-view
2. 在底部弹窗根容器使用：

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const BottomModal = () => {
  return (
    <KeyboardAwareScrollView enableOnAndroid={true} extraScrollHeight={20}>
      {/* 内嵌的顶部标签页组件 */}
    </KeyboardAwareScrollView>
  );
};

3. 修改AndroidManifest.xml中的软键盘配置：

android:windowSoftInputMode="adjustPan"

4. 依赖版本兼容性调整 #

该问题大概率是@react-navigation/material-top-tabs与RN 0.70.4的兼容bug，可尝试：

• 将@react-navigation/material-top-tabs升级到^6.5.2（与RN 0.70.x匹配的稳定版本）
• 或临时降级RN到0.69.x验证问题是否消失

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