我正在try 处理错误

使用有效负载进行导航的操作..未由任何导航员操作

  1. 已try 无路由匹配.文件中写道:
const config = {
  screens: {
    Home: {
      initialRouteName: 'Feed',
      screens: {
        Profile: 'users/:id',
      },
    },
    NotFound: '*',
  },
};

我不确定我是否需要添加其他东西,但就像这样,它不起作用.

  1. 我try 使用错误边界,并将我的导航器包装在这个包中.我的错误边界工作得很好,但它不能捕获导航错误.不确定是不是不打算捕捉它们,还是我的代码有问题.

App.js


const App = () => {
    const config = {...}
        return (
        <NotificationsProvider>
            <Navigator linking={linking}/>
        </NotificationsProvider>
    );
}

Navigator.js


<NavigationContainer ref={navigationRef} linking={linking}>
   <MyStack />
</NavigationContainer>

MyStack:


const MyStack = () => {
    return (
      <ErrorBoundary
          FallbackComponent={FallbackWithoutReset}
          onError={onError}
          navigation={navigation}
      >
        <Stack.Navigator navigation={navigation}>
            <Stack.Group>
             ...
            </Stack.Group>
        <Stack.Group>
            </Stack.Screen>
            <Stack.Screen
                name="Settings"
                component={SettingsScreen} 
            />
        </Stack.Group>
    ...
        <Stack.Screen name="NotFound" component={NotFoundScreen} />
     </Stack.Navigator>
   </ErrorBoundary>
    )
}

推荐答案

您可以使用NavigationContainer组件的onUnhandleAction函数.如文档中所述

当导航操作未由任何导航器处理时调用的函数.

默认情况下,当操作未被处理时,Reaction导航将显示仅限开发的错误消息.您可以通过提供自定义函数来覆盖默认行为.

因此,您可以通过onUnhandleAction函数捕获任何"未由任何导航器处理"的错误.

然后,如果您想导航到备用路由,您可以使用useNavigationContainerRef挂钩.

下面是一个最小的工作示例和相应的snack个示例.

import { Button, View } from 'react-native';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Not handled by any navigator"
        onPress={() => navigation.navigate('IDoNotExist')}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  const navigationRef = useNavigationContainerRef();
  return (
    <NavigationContainer ref={navigationRef} onUnhandledAction={(error) => {
      console.log("Using Fallback", error)
      navigationRef.navigate("Home")
    }}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Reactjs相关问答推荐

sourceBuffer. appendBuffer成功,但h5视频播放器卡住了

有没有方法覆盖NextJS 14中的布局?

如何防止使用useCallback和memo重新渲染

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

在url中使用MongoDB对象ID被认为是不好的做法?

Antd V5组件自定义主题

更改点几何体的坐标会将其隐藏

状态更改是否卸载功能组件

Material-UI 和 React Hook 表单不记录值

如何在 React Native 中渲染下面的对象数组?

在遵循 react-navigation 的官方文档时收到警告消息

React 测试库 - 如何断言异步函数之间的中间状态?

无法在 KeyDown 上调用 useCallback 函数

在 React 中将路径与查询变量匹配

如何通过 id 从 useSprings 数组中删除元素

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

useState 在生命周期中的位置

react 本机日历

当状态改变时如何执行一些动作,但只针对第一次更新?

当页面重新加载react 路由导航到第一页 v6