React Native 导航分离函数后如何解决屏幕检测不到的问题？

2024-03-19 16:22:47

React Native 导航中分离函数后检测不到屏幕？

在 React Native 应用程序中，将导航功能分离到单独的函数中可以提高代码的可复用性和可维护性。然而，在某些情况下，这可能会导致应用程序无法检测到屏幕，从而导致导航错误。本文将深入探讨这个问题，并逐步指导您解决它。

问题

当你分离导航功能后，你可能会遇到这样的错误：

The action 'NAVIGATE' with payload {"name":"Main"} was not handled by any navigator.

Do you have a screen named 'Main'?

这表明导航堆栈中的 "Main" 屏幕未正确配置。

原因

出现此错误的原因通常是导航堆栈更新不正确。分离函数时，导航堆栈可能未正确更新，导致应用程序无法检测到目标屏幕。

解决步骤

要解决这个问题，请按照以下步骤操作：

检查导航堆栈： 确保 App.js 文件中的导航堆栈正确配置，如下所示：

function App() {
  return (
    <NavigationContainer> 
          <Stack.Navigator>
            <Stack.Screen
              name="Main"
              component={MyTabs}
              options={{
                headerShown: false,
              }}
            />
            {/* ...其他屏幕配置 */}
          </Stack.Navigator>
    </NavigationContainer>
  );
}

检查导航动作： 在 LoginNav 函数中，确保导航动作正确指向 "Main" 屏幕：

function LoginNav() {
  return (
    <NavigationContainer>
       <Stack.Navigator>
            {/* ...其他屏幕配置 */}
            <Stack.Screen
              name="Main"
              component={MyTabs}
              options={{
                headerShown: false,
              }}
            />
          </Stack.Navigator>
    </NavigationContainer>
  )
}

检查路由： 在 routes.js 文件中，确保路由与导航堆栈匹配。MyTabs 组件应与 "Main" 屏幕关联：

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        {/* ...其他选项 */}
      }}>
      <Tab.Screen
        name="Main"
        {/* ...其他选项 */}
      />
      {/* ...其他选项卡屏幕 */}
    </Tab.Navigator>
  );
}