调试react native的项目有一个报错:
there is no route defined for key XXXX
它发生在我调试TabNavigator选项卡路由器的时候,我把如下代码的Agreement路由转移到了另一个StackNavigator中。明明我在HomeStack中定义好了呀。
const TabsNavigator=createBottomTabNavigator({ Home:{ screen:HomeStack }, Second:{ screen:SecondPage }, Video:{ screen:VideoPage, }, Auction:{ screen:AuctionPage }, Center:{ screen:CenterPage }, /*Agreement:{ screen:AgreementPage }*/ },{}})
const HomeStack=createStackNavigator({ Home:{ screen:HomePage }, Agreement:{ screen:AgreementPage }, //Agreement转移到这里 }
其实原因跟我们的代码关系不大,它是
react navigation官网上的警告是这么说的:
警告:Route/Router 定义更改 当你的应用程序代码更改为在导航状态下支持给定路线的新路线或不同路线时,应用程序可能会在呈现旧导航状态时中断。 在重新配置路由器和导航层次结构时,这可能会在开发期间定期发生。 但是当你发布一个新版本的应用程序时,它也可能在生产中发生! 保守的行为是在应用程序更新后擦除导航状态。 最简单的方法是为你发布给用户的每个版本引用不同的持久性密钥。 React Navigation 使用 React 的componentDidCatch功能试图减轻由路由定义更改引起的崩溃,但这被认为是实验性的,可能无法捕获所有错误。
划重点,重新配置导航的层次结构时会发生bug。所以我们先擦除持久化的代码,这个时候就不会报错了。
return <Provider store={store}> <AppContainer/> </Provider>*/ /*return <Provider store={store}> <AppContainer persistenceKey={"navigationDEV"} renderLoadingExperimental={() => <ActivityIndicator/>}/> </Provider> */
如果我们还想继续使用持久化state带给我们的开发方便,那么路由改好之后,把persistenceKey的注释放开,重新 npm run start 启动项目就可以回到bug之前的开发中了。