如何在 @react-navigation/本机中手动设置导航状态
我有一种情况,我们允许用户在不登录的情况下完成多步表格。当他们完成最后一步并击中提交时,我们要求他们登录。 那是我将导航状态保存在异步存储中的时候。成功登录后,当用户再次打开应用程序时,我希望能够将保存状态加载到当前的导航状态。 这意味着它们将处于多步形式的最后一步,并且还可以回到上一步。
我尝试的是:
- 直接导航到最后一步,但是这种情况并不是最佳选择,因为当用户返回时,他会回到主屏幕而不是前一步。
- 持续存在的react-navigation状态,我调试并看到我从异步中获得了正确的数据存储,我将其设置为导航提供商的初始状态,但实际上没有发生任何事情。也许我在此步骤中做错了什么。反应游动应该导航到最后一步吗?我已经看到从异步存储导航中保存的索引,这是正确的。
- 我还尝试了
navigation.reset
('navigationfromasyncstorage')无济于事。
我的导航器的结构就是这样:
const RootStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
...TransitionPresets.SlideFromRightIOS,
headerShown: false,
}}
>
//MultiStepForm is also Stack.Navigator
<Stack.Screen
name={NavigatorRoute.MULTI_STEP_FORM}
component={MultiStepForm}
/>
...
</Stack.Navigator>
);
};
编辑:附加信息 我设法从异步存储中加载了多步骤形式的数据。但是,我也是更重要的是,也要做的是将路线加载到导航堆栈中。因此,如果我的多步骤表格为5个屏幕,则在应用程序负载上,我想转到最后一步,还将以前的4个屏幕加载到堆栈中。因此,如果用户返回,他会返回上一个屏幕。
I have a case where we allow users to complete a multi-step form without logging in. When they complete the last step and hit submit, we ask them to log in.
That's when I save the navigation state in the async storage. After a successful login, when the user opens the app again I want to be able to load the saved state into the current navigation state.
Meaning that they would be at the last step of the multi-step form and also be able to go back to the previous step.
What I have tried:
- Navigating directly to the last step, but this case isn't optimal because when the user goes back, he will go to the home screen and not the previous step.
- Persisting react-navigation state, I debugged and saw that I get the correct data from the async storage, I've set it into the initialState of the navigation provider, but nothing really happens. Maybe I'm doing something wrong in this step. Should the react-navigation navigate to the last step? I have seen the index saved from the async storage navigation and it's the correct one.
- I've also tried
navigation.reset
('navigationFromAsyncStorage') to no avail.
The structure of my navigators is like this:
const RootStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
...TransitionPresets.SlideFromRightIOS,
headerShown: false,
}}
>
//MultiStepForm is also Stack.Navigator
<Stack.Screen
name={NavigatorRoute.MULTI_STEP_FORM}
component={MultiStepForm}
/>
...
</Stack.Navigator>
);
};
Edit: Additional info
I managed to load back the multi step form data from the async storage. But what I am also and more importantly trying to do is also load the routes back into the navigation stack. So if my multi step form is 5 screens long,on app load I want to go to the last step and also have previous 4 screens loaded into the stack. So if user goes back, he goes back to the previous screen.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果仅重置应用程序的拳头屏幕中的路由(例如Splash屏幕)
what if just reset the routes in the fist screen of the app (like splash screen)