我克隆了存储库: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
上。
谢谢!