没有为关键[路线]定义路线-iPhone-如何摆脱缓存的路线

时间:2019-02-06 03:58:11

标签: ios react-native react-navigation jsx expo

我克隆了存储库:react-native-paper以在其中使用example

https://github.com/callstack/react-native-paper/tree/master/example

我将react-navigation更新为3.1.4版本。

然后,我添加了另一个虚拟屏幕,其路由为:svg,其中包含示例文本。只是为了做一些实验。

然后,我在iPhone上运行该应用程序(通过Expo应用程序),并转到相应的屏幕,其路线为:svg

我的问题是我不再需要以前的屏幕,而我想摆脱它。然后,现在当应用程序通过iPhone应用程序加载到我的Expo上时,出现以下错误:

Error: There is no route defined for key svg.
Must be one of: 'home','webBrowser','bottomNavigation','card'

This error is located at:
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (created by SceneView)
    in SceneView (at DrawerView.js:149)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at DrawerView.js:148)
    in RCTView (at View.js:44)
    in ScreenContainer (at DrawerView.js:138)
    in RCTView (at View.js:44)
    in AnimatedComponent (at DrawerLayout.js:440)
    in RCTView (at View.js:44)
    in AnimatedComponent (at DrawerLayout.js:439)
    in Handler (at DrawerLayout.js:495)
    in DrawerLayout (at DrawerView.js:165)
    in DrawerView (created by Navigator)
    in Navigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:93)
    in ThemeProvider (at Provider.js:17)
    in RCTView (at View.js:44)
    in Portal.Host (at Provider.js:16)
    in Provider (at App.js:84)
    in PaperApp (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in NavigationContainer (at App.js:93)
    in ThemeProvider (at Provider.js:17)
    in RCTView (at View.js:44)
    in Portal.Host (at Provider.js:16)
    in Provider (at App.js:84)
    in PaperApp (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Stack trace:
  D:\mobile-app\node_modules\@react-navigation\core\dist\routers\getScreenForRouteName.js:24:20 in getScreenForRouteName
  D:\mobile-app\node_modules\@react-navigation\core\dist\getChildRouter.js:7:52 in getChildRouter
  D:\mobile-app\node_modules\@react-navigation\core\dist\getChildNavigation.js:49:50 in _getChildNavigation
  D:\mobile-app\node_modules\@react-navigation\core\dist\navigators\createNavigator.js:50:60 in <unknown>
  D:\mobile-app\node_modules\@react-navigation\core\dist\navigators\createNavigator.js:44:21 in getDerivedStateFromProps
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:7663:46 in applyDerivedStateFromProps
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:8270:6 in mountClassInstance
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10480:8 in updateClassComponent
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14129:41 in workLoop
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14226:15 in renderRoot
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15090:24 in performWork
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15047:14 in performSyncWork
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14925:19 in requestWork
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14711:16 in scheduleWork
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
  D:\mobile-app\node_modules\react\cjs\react.development.js:364:31 in setState
  D:\mobile-app\node_modules\@react-navigation\native\src\createAppContainer.js:278:20 in componentDidMount$
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:288:30 in invoke
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:152:28 in invoke
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:162:19 in <unknown>
  D:\mobile-app\node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  D:\mobile-app\node_modules\promise\setimmediate\core.js:123:25 in <unknown>
  D:\mobile-app\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152:14 in _callTimer
  D:\mobile-app\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200:17 in _callImmediatesPass
  D:\mobile-app\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464:30 in callImmediates
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:320:6 in __callImmediates
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in <unknown>
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10 in __guard
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:17 in flushedQueue
  ...

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.%s, 
    in Icon (at Icon.js:137)
    in Icon (at DrawerItem.js:94)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in TouchableHighlight (at TouchableRipple/index.native.js:90)
    in TouchableRipple (created by Context.Consumer)
    in ThemeProvider (created by Context.Consumer)
    in withTheme(TouchableRipple) (at DrawerItem.js:82)
    in RCTView (at View.js:44)
    in Drawer.Item (created by Context.Consumer)
    in ThemeProvider (created by Context.Consumer)
    in withTheme(Drawer.Item) (at SideMenu.js:52)
    in RCTView (at View.js:44)
    in Drawer.Section (created by Context.Consumer)
    in ThemeProvider (created by Context.Consumer)
    in withTheme(Drawer.Section) (at SideMenu.js:50)
    in RCTView (at View.js:44)
    in SideMenu (created by Context.Consumer)
    in ThemeProvider (created by Context.Consumer)
    in withTheme(SideMenu) (at DrawerNavigator.js:14)
    in contentComponent (at DrawerSidebar.js:55)
    in RCTView (at View.js:44)
    in DrawerSidebar (at DrawerView.js:123)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AnimatedComponent (at DrawerLayout.js:453)
    in RCTView (at View.js:44)
    in AnimatedComponent (at DrawerLayout.js:439)
    in Handler (at DrawerLayout.js:495)
    in DrawerLayout (at DrawerView.js:165)
    in DrawerView (created by Navigator)
    in Navigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:93)
    in ThemeProvider (at Provider.js:17)
    in RCTView (at View.js:44)
    in Portal.Host (at Provider.js:16)
    in Provider (at App.js:84)
    in PaperApp (at withExpoRoot.js:22)

Stack trace:
  D:\mobile-app\node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:619:8 in warningWithoutStack
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:13205:6 in warnAboutUpdateOnUnmounted
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14683:33 in scheduleWork
  D:\mobile-app\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
  D:\mobile-app\node_modules\react\cjs\react.development.js:364:31 in setState
  D:\mobile-app\node_modules\@expo\vector-icons\createIconSet.js:23:39 in componentWillMount$
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:288:30 in invoke
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:152:28 in invoke
  D:\mobile-app\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:162:19 in <unknown>
  D:\mobile-app\node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  D:\mobile-app\node_modules\promise\setimmediate\core.js:123:25 in <unknown>
  D:\mobile-app\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152:14 in _callTimer
  D:\mobile-app\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200:17 in _callImmediatesPass
  D:\mobile-app\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464:30 in callImmediates
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:320:6 in __callImmediates
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in <unknown>
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10 in __guard
  D:\mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:17 in flushedQueue
  ...

好像该路由在我的iPhone / app上缓存了一些方式,这很烦人。我还尝试卸载Expo应用程序并从App Store重新安装,但问题仍然存在。

以防万一,在这里我放置了文件代码:

StackNavigator.js

import * as React from 'react';
import { createStackNavigator } from 'react-navigation';
import { Appbar } from 'react-native-paper';
import ExampleList, { screens } from '../screens/ExampleList';
import WebBrowser from '../screens/WebBrowser';

const routes = Object.keys(screens)
    .map(id => ({ id, item: screens[id] }))
    .reduce((acc, { id, item }) => {
        const Comp: any = item;
        const Screen = props => <Comp {...props} />;

        Screen.navigationOptions = props => ({
            header: (
                <Appbar.Header>
                    <Appbar.BackAction onPress={() => props.navigation.goBack()} />
                    <Appbar.Content title={Comp.title} />
                </Appbar.Header>
            ),
            ...(typeof Comp.navigationOptions === 'function'
                ? Comp.navigationOptions(props)
                : Comp.navigationOptions),
        });

        return ({
            ...acc,
            [id]: { screen: Screen },
        });
    }, {});

export default createStackNavigator(
    {
        home: { screen: ExampleList },
        webBrowser: { screen: WebBrowser },
        ...routes,
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
            header: (
                <Appbar.Header>
                    <Appbar.Action icon="menu" onPress={() => navigation.openDrawer()} />
                    <Appbar.Content title="Dummy App" />
                </Appbar.Header>
            ),
        }),
    }
);

关于如何摆脱缓存的svg路线的任何想法?

我不得不说,在Android上我没有这个问题。它仅在iPhone上。

谢谢!

0 个答案:

没有答案