Currently, React Navigation only supports goBack(key) which indicates it will go back to the screen previous to the screen supplied.
I have Checkout -> Shipping -> Payment -> Review screens, where it will take the user straight from Checkout to Review if shipping and payment information have already been recorded. However, on Review, if I want to edit shipping information, I would need to do goBack(payment-screen-key), which I have no access to because the user never navigated to the payment screen (thus, no way of storing that key in redux).
Upon searching react-navigation github issues, it doesn't seem like there's a clean way of accomplishing this task. Is there a way to do essentially navigate(routeName) but not add another screen to the stack?
Conceptually you're not going back when you want to edit the shipping information from the review screen if you've gone straight from Checkout to Review, so as you mention backing to that screen doesn't work, and wouldn't make sense.
What about instead re-thinking your checkout flow? For example navigate from Review to the section you want to edit without the possibility to advance from there.
Checkout -> Review -> EditShippingInformation -> goBack(Review) -> EditPaymentInformation -> goBack(Review) -> End
Where EditShippingInformation and EditPaymentInformation includes a form with a save button that leads back to the Review screen rather than navigates forward to the Review screen. Perhaps these EditShippingInformation and EditPaymentInformation screens could be dialogs even?
Related
I am using one of the woodmart built-in themes and have 2 issues (I think they are so easy to do but couldn’t find any solution on internet which works well) one is about register page link on the sidebar login are and the logout confirmation.
When you go to our website which is http://www.fitovision.com and click on Login/Register button on the right top of the page a sidebar widget comes out. I have changed the Create An Account link to my custom page but because I did this on the integration page of woocommerce to the theme, when I get any update it goes back. So looking for a hook or function codes to add to the child theme functions page to keep it there forever even if I get any update. Could you please tell me how to do that? I have asked this to the theme editors support page but they said it belongs to woocommerce so asked me to open a ticket here.
Second one is when you login to the page we have an dropdown menu on the top on the place of Login/Register link. And there is Log Out link on the at dropdown menu. When I click it it goes to My Account page and when I click there again it logs out. I have read and applied too many ways to bypass the logout confirmation on first click but none of them worked as I realised that they were all old dated posts. So I thought after some time and your updates it should be forced by the wocoommerce to do it. But my clients definitely do not want it. Is there again anything else I can do for that to log out on the first click? And keep it there with adding to the child theme functions page?
Thank you for replies instead.
Emre GOKTEPE
I have a product screen that shows the details of the product. i.e. "Product Details" and it also shows similar products and upon selecting one of the similar products I want to navigate to the same screen but this time the information will be different.
I'm using context API to update the latest selected product and that's how I'm rendering different information on the same screen.
storeContext.setSelectedProduct(porduct)
navigation.navigate("Product Details")
Is there a way to make it work? I am not sure what more details I should share.
you can re-render the screen again with different data-set or you can use push method of react-navigation to achieve your task.
You can use navigation.push("Product Details") to add the same screen to stack and you can also navigate back to the previous "Product Details" screen using this method.
And then whatever extra details you want to pass can be passed with the navigation function or fetched inside the component using the api methods.
Solution:
navigation.push("Product Details")
You Can check here best Example
Read Official Doc
I am using Vue 2.x.
There is a post page. When I click on a button in the post page, I go to the edit page. And when I click submit on the edit page, I used this.$route.replace(link_to_post_page) in order to remove the edit page from the history stack, and push the post page.
So now I have two of the same routes(the post page) in my history stack.
The problem is, when I click on the browser's back button, I go to the same page, that is, the post page. This is a very unnatural flow of pages for the user, and I want to fix it.
I have researched on ways to fix this for 6 hours, however I failed to find the solution.
My first try was to use Navigation Guards. But Navigation Guards only work when the route changes. In my case, the route does not change.
I also tried using window.history.onPopState event listener but failed with that too, because I could not manipulate the route when using window.history.onPopState.
I would really appreciate your help. Thanks.
P.S.
The most similar question on Stack Overflow is this vue-router: skip page when using browser back button but it does not answer my question at all. I have checked other questions but they also don't answer my question.
Why not going back in the history instead of pushing a new /edit route?
Steps
Routes stack
/post
['post']
-> Click on "edit" button
/edit
['post', 'edit']
-> this.$router.back()
/post
['post', 'edit']
The drawback of this is that the user still can manually go forward to the /edit page.
But if they go on another page, it will override the next steps (the /edit route above on the stack)
How can I manipulate a Frame's history in a WinRT XAML app?
The user will start on my hub page, where they can select an existing project to go to its edit screen, or they can select "new project". "New project" will take them through a short wizard, then take them to the "edit project" screen.
It makes sense for the wizard pages to just be pages that I navigate to in the frame; that way the user can back out of the wizard if they change their mind. (It'll only be two pages, so "back" can take the place of "cancel".) But once the wizard is done and the changes are committed, there's no longer any reason for those wizard pages to be in the history; if the user clicks Back from the "edit project" page, I want them to go right back to the hub.
To illustrate, I want the flow to look something like this:
Frame history: Hub. User clicks "New Project".
Frame history: Hub -> Wizard Page 1. User clicks "Next".
Frame history: Hub -> Wizard Page 1 -> Wizard Page 2. User clicks "Finish".
Frame history: Hub -> Edit Project.
Frame doesn't seem to have any methods along the lines of "remove from history". The docs do have hints that there might be some way to override the history, because the docs for GoBack say "Navigates to the most recent item in back navigation history, if a Frame manages its own navigation history" (emphasis mine), but that's all it has to say on the topic -- there's no mention of how someone else can manage history for it. So I don't know whether that's useful or not.
How can I remove my wizard pages from my Frame's history once the user completes the wizard?
You can remove pages from the history by calling SetNavigationState(string navigationState) on the frame. Unfortunately the format of the serialized navigationState is "for internal use only", so just changing the string might break your code in future versions.
I only can think of a future proof method to completely clear the navigation stack:
At program startup save the empty navigation state by calling GetNavigationState.
BEFORE calling Navigate for your Edit Project page, call SetNavigationState with the empty navigation state.
Your Edit Project page will now be the first page on the stack.
Starting with Windows 8.1, you have access to the BackStack property of a Frame. You can easily remove some content or clear the whole back stack.
Here is what I'm using the clear the back stack :
var rootFrame = (Window.Current.Content as Frame);
rootFrame.Navigate(typeof(MyPage));
rootFrame.BackStack.Clear();
its a solution for me :
while (ContentFrame.BackStack.Count > 1)
{
ContentFrame.BackStack.Remove(ContentFrame.BackStack.ElementAt(ContentFrame.BackStack.Count-1));
}
What is the best way to make password/logon screen? Iread somewhere that it is better to use a popup control. If so where exactly do I need to create it, in App.xaml?
There are number of things you need to consider while implementing a login screen for your Windows Phone 7 application. Here is a sample that can give you an idea of how to get started, if you haven't. One of the important aspects of a login screen is its appearance on the "back stack" - the list that grows while you are within your application, each item in this list is accessible through the "back" button. Ideally, you wouldn't want the user to press the back button and view the login screen. In other words, the login screen should never be in the "back stack". Therefore, it is probably best to implement the login screen as popup, see Peter Torr's post discussing this.
Peter Torr published an article on "Places" which could help you design your application with the login screen.
Regarding implementation of a popup, I posted a simple example in the Answer linked below which you can check out. In this case it implements a context menu.. you can populate the popup with whichever contents make sense for your login screen.
http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/e6d2a444-91d9-4d69-937e-689b24c36c09
I recommend reading the two links Indyfromoz has hooked you up with for how to handle a login screen wrt the navigation service. This are the most relevant and the current posts on the topic of handling login screens and the like wrt the navigation service.