使用react-native-bootsplash后启动页卡住无法进入导航求助

使用react-native-bootsplash替换原生启动页后，构建项目出现卡在启动页、无法进入导航的问题，相关代码如下：

App.js

export const Navigation = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer onReady={() => RNBootSplash.hide(fade: true, duration: 500)}>
        <PrivateNavigation />
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

PrivateNavigation 代码

export const PrivateNavigation = () => {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name={routes.VENUE_PROFILE} component={VenueProfile} />
      <Stack.Screen name={routes.REVIEWS} component={Reviews} />
      <Stack.Screen name={routes.CUSTOM_TRIP} component={CustomTrip} />
      <Stack.Screen name={routes.TRIP_LOCATION} component={TripLocation} />
      <Stack.Screen name={routes.TRIP_DETAIL} component={TripDetails} />
      <Stack.Screen name={routes.NOTIFICATIONS} component={Notifications} />
      <Stack.Screen
        name={routes.ACCOUNT_SETTINGS}
        component={AccountSettings}
      />
    </Stack.Navigator>

1. 修正 RNBootSplash.hide 的调用语法 #

代码中调用RNBootSplash.hide时的参数写法错误，直接传入fade: true, duration: 500不符合JS对象字面量语法，会触发语法错误导致代码执行中断，启动页无法隐藏。

修正后的App.js代码：

export const Navigation = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer onReady={() => RNBootSplash.hide({ fade: true, duration: 500 })}>
        <PrivateNavigation />
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

2. 额外排查点 #

如果修正语法后问题仍存在，检查以下内容：

• 确认已完成react-native-bootsplash的原生配置（iOS的Info.plist、Android的styles.xml等文件修改）
• 检查HomeTabs组件是否存在渲染阻塞、无限循环或未处理的异步请求错误
• 确保RNBootSplash已正确导入，无拼写错误
• 尝试在NavigationContainer的onReady回调外单独调用RNBootSplash.hide()，验证启动页能否正常隐藏

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