React Native初始化闪屏+navigation.setRoot()后触摸失效问题咨询

我之前开发类似项目时也踩过这个坑！问题几乎可以肯定是闪屏组件没有在导航根布局完全就绪后隐藏，导致它一直覆盖在导航容器的上层，把所有触摸事件都拦截了。下面是我亲测有效的解决方案：

核心思路 #

必须确保SplashScreen.hide()在Navigation.setRoot()执行完成后再调用——如果闪屏先于导航布局渲染完成就隐藏，或者导航布局还没初始化就保留闪屏，都会导致触摸异常。

具体实现步骤 #

1. 调整初始化逻辑，用导航的启动监听回调处理 #

把设置导航根布局和隐藏闪屏的逻辑放在registerAppLaunchedListener里，并且用await确保导航设置完成后再隐藏闪屏：

import { Navigation } from 'react-native-navigation';
import SplashScreen from 'react-native-splash-screen';
import firebase from '@react-native-firebase/app';

// 先注册你的所有屏幕组件
Navigation.registerComponent('app.HomeScreen', () => require('./screens/HomeScreen').default);
Navigation.registerComponent('app.LoginScreen', () => require('./screens/LoginScreen').default);

// 监听应用启动完成事件
Navigation.events().registerAppLaunchedListener(async () => {
  // 可选：等待Firebase初始化/用户状态获取完成
  await new Promise(resolve => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      unsubscribe();
      resolve(user);
    });
  });

  // 设置导航根布局，用await确保操作完成
  await Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'app.HomeScreen' // 你的初始屏幕
            }
          }
        ]
      }
    }
  });

  // 导航根布局就绪后，再隐藏闪屏
  SplashScreen.hide();
});

2. 检查原生端配置，避免提前隐藏闪屏 #

• Android：打开MainActivity.java，确保只在onCreate里调用SplashScreen.show(this)，不要在这里调用hide()：

import org.devio.rn.splashscreen.SplashScreen;

@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this); // 只显示闪屏，隐藏交给RN端处理
  super.onCreate(savedInstanceState);
}

• iOS：检查AppDelegate.m，确保没有提前调用隐藏闪屏的代码，所有隐藏逻辑都放在RN端。

3. 避免在单个屏幕的componentDidMount里直接隐藏闪屏 #

如果你的初始屏幕有异步加载逻辑（比如请求数据），在componentDidMount里调用SplashScreen.hide()可能会导致导航还没完全就绪，闪屏隐藏后触摸事件依然异常。统一放在导航启动监听里处理更可靠。

额外排查点 #

如果上面的方法还没解决，检查：

• 有没有给闪屏组件设置过高的zIndex（原生端配置里）
• 导航容器的渲染是否被异步操作阻塞，导致迟迟无法响应触摸

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