React Navigation：“导航”对象尚未初始化

Question

我正在通过 https://reactnavigation.org/docs/en/upgrading-from-4.x.html 和 https://reactnavigation.org/docs/en 将 React Navigation 库从 4.xx 升级到 5 /兼容性.html.

我收到错误：

NavigationDebug Error:  Error: The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. You can ensure that all navigators have mounted after the callback to 'useEffect' is called in your root component. See https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html#handling-initialization for more details.
    at dispatch (BaseNavigationContainer.tsx:202)
    at Object.acc.<computed> [as navigate] (BaseNavigationContainer.tsx:245)
    at Object.navigate (NavigationService.ts:20)
    at SplashScreen.redirectUser (splash-screen.tsx:234)
    at SplashScreen.proxiedMethod (createPrototypeProxy.js:44)
    at _callee2$ (splash-screen.tsx:298)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)

创建 NavigationService 时 (https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)。

index.js

let Init = ((props) => {

    enableScreens();

    React.useEffect(() => {
        isMountedRef.current = true;

        return () => isMountedRef.current = false;
    }, [])

    return (
        <NavigationContainer ref={navigationServiceRef}>
            <Provider {...stores}>
                    <App {...props}/>
            </Provider>
        </NavigationContainer>
    );
})

AppRegistry.registerComponent(appName, () => Init);

导航服务

import { NavigationActions, StackActions } from '@react-navigation/compat';

import React from 'react';

export const isMountedRef = React.createRef();

export const navigationServiceRef = React.createRef();

export function navigate(name, params) {
    if (isMountedRef.current && navigationServiceRef.current) {
        console.log("Navigation Should happen")
        try {
            navigationServiceRef.current.navigate("App", params);
        }catch(e){
            console.log("NavigationDebug Error: ", e)
        }
    } else {

    }
}

export default {
    navigate
};

Answer 1

“...创建导航服务时” - 您确定这是错误发生的时间吗？您的控制台日志是否显示

"Navigation Should happen"

？

也许在其他地方你有一个“导航”调用，它在上面显示的逻辑之前执行。

在您的链接 - 不使用导航道具进行导航中，它建议：

“导入 RootNavigation” 和 “RootNavigation.navigate(...)”

也就是说，在导航器准备好之前可能调用“navigate”的任何地方，请将

navigate

替换为

RootNavigation.navigate

。 （其中

RootNavigation

是包含相关代码的模块。有关更多详细信息，请参阅链接。）

Answer 2

导入：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

然后 const Stack = createNativeStackNavigator();

<NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Homepage" component={Homepage}
            options={{
          title: 'Homepage',
          headerStyle: {
            backgroundColor: '#75C2F6',
          },
          headerTintColor: 'white',
        }} />

      <Stack.Screen name="Page_name_here" component={Page2}
        options={{
          title: 'Page_name_here',
          headerStyle: {
            backgroundColor: '#75C2F6',
          },
          headerTintColor: 'white',
        }} />
    </Stack.Navigator>
  </NavigationContainer>

注意：您只能使用 TailwindProvider 和任何自定义组件来包装 NavigationContainer。如果你将它包裹起来，就会滚动视图，那么它将不起作用。

Answer 3

对于谁在玩笑测试中遇到此错误。我就是这么做的...

const { getByTestId } = render(
        <NavigationContainer ref={navigationRef}>
          <ComponentHere {...props} />
        </NavigationContainer>
    );

const yourTextID = getByTestId('yourTextID');

setTimeout(() => {
      fireEvent.press(yourTextID);
}, 1000);