Currently in my application I have a screen that is connected to the deep links through react navigation. When I open this screen, background the application and then try to open a deep-link, react navigation opens the existing screen on the navigation stack.
I want the linking options to trigger a completely new page on top of the existing one and put it in the stack, is this possible?
You can do this by specifying a getId function:
<Stack.Screen
name="Profile"
component={ProfileScreen}
getId={({ params }) => params.userId}
/>
The getId function should return a unique ID to identify the screen - usually, the ID of the item shown in the screen, React Navigation will only reuse the screen if the ID is the same.
https://reactnavigation.org/docs/screen/#getid
Related
I need to implement the routing functionality in Xamarin.Forms application using the ReactiveUI framework.
The following transitions map needs to be implemented:

Above the black arrows show forward transitions (e.g. I go from the Menu to the Order page by clicking on the menu item button), while the red arrows are for Go Back functionality. Please note that Go back should work for both: (a) the "Go back" link in the top navigation bar (b) the hardware «Back» button on the Android devices.
How do I implement the transitions between sibling pages like these:
Menu - Order - Map - Back to the Menu
Menu - Order - Order details - Pin details page - Back to the Map - Back to the Menu
?
P.S. Here is the guide https://www.reactiveui.net/docs/handbook/routing/ I followed recently, so I used GoNext/GoBack commands to implement more simple transitions like Menu - Order - Order details - Back to the Order - Back to the Menu. It does not work well for the described case, as the Back buttons make transitions back to the previous page instead of their parent page in the navigation map.
The NavigateBack command implementation is quite simple in ReactiveUI's RoutingState, it just removes the last element from the RoutingState.NavigationStack, RoutingState.NavigationStack is an instance of ObservableCollection<IRoutableViewModel>.
So in your particular case, you could write your own NavigateBack command implementation that mutates the navigation stack as required by your application domain. You could use a switch block to figure out what page is currently shown in the screen, and then map that page into another page, either newly created or stored in a field or in a Locator.Current. Probably your command will require a more complex canExecute implementation as well.
ReactiveCommand<Unit, IRoutableViewModel> navigateBackDomainAware =
ReactiveCommand.CreateFromObservable(() => {
var currentViewModel = NavigationStack[NavigationStack.Count - 1];
if (currentViewModel is PinDetailsViewModel) {
var mapViewModel = GetMapViewModel();
NavigationStack.Add(mapViewModel); // The navigation.
return Observable.Return(mapViewModel);
} else {
// Handle other pages. You can also put some domain-specific code
// describing the navigation mappings in your application here.
}
});
I'm trying to make a simple app with Playground (https://play.nativescript.org/). I'm using "RadSideDrawer" as a side menu. I'm satisfied. BUT ... every time I use "RadSideDrawer" and I move from one page to another, inside the "ActionBar" a button appears whose function is to bring back to the left page (please have a look at this page https://www.attivitacollaterali.it/appdata/services/apps/RadSideDrawer.html). I don't need and want this button. How can I make it not appear? Thank you.
Or, if not, at least update "RadSideDrawer". I mean that if the button goes back, for example to the "Search" page from the "Home" page, it should highlight/select "Search" in the "RadSideDrawer" menu and not leave "Home". Thanks again.
I think you're looking for the "clearHistory" option while navigating. When navigating to another page, you must do this:
this.router.navigate([url], { clearHistory: true });
Just make sure you're injecting RouterExtensions in your constructor:
constructor(private router: RouterExtensions) {}
That should clear the navigation stack when navigating, thus removing the button to go back to the previous page.
EDIT: If you want to retain the navigation stack, I believe you can also edit your action bar like this:
<ActionBar>
<NavigationButton visibility="collapsed"/>
</ActionBar>
I have a DrawerNavigator as the basic block of my app. The reason is that it should be accessible from all screens. As such, it's also the target for all deep links and will only display some of the items in the actual drawer.
The main page consists of a bottom navigator of stacks, and more entries are also stacks themselves.
The problem is that navigating in the drawer doesn't show any back button as navigating in the stacks would. And it would be nice to have these, just like the back gesture on Android works.
Is this something that exists and if yes, how should it be tackled?
You'll need your own header component in each screen which has a back button. You can use a custom one or one from a component library such as react native paper.
function Home({ navigation }) {
return (
<React.Fragment>
<MyCustomHeader title="Home" onBackPress={navigation.goBack} />
{{
/* screen content */
}}
</React.Fragment>
);
}
Make sure you pass backBehavior: 'history' to createDrawerNavigator.
I am attempting to use navigateTo() within a modal in my NativeScript Vue application.
My modal components is wrapped in a <Frame>, which I understand is how to allow it to be a navigation controller. However, when I attempt to navigate to the sub-component of the modal, it actually opens behind the modal in the main frame.
You can see this behavior here: https://play.nativescript.org/?template=play-vue&id=azowAE&v=3
Click the "Open Modal" button and then click the "Show subpage" button. Seemingly nothing happens, but if you then click the "Close" button, you'll see the sub page opened behind the modal.
In order to navigate to a frame that is used in a modal, you should utilize the second argument to the $navigateTo method. This can reference a frame by reference or id. The easiest way I found was to give the frame in the modal an id:
<Frame id="modal-frame">...</Frame>
Then you can navigate inside the modal as as example
this.$navigateTo(OtherComponent, {frame: 'modal-frame'});
Note, you do not put a # in front of the ID like a CSS selector. Only the id value.
See for code reference: https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48
Another cause for this same issue is when the sub-component that the modal is navigating to isn't wrapped in a <Page> tag.
When you add a catch to your navigate code then it gives the following errors, depending on whether you use the ref or id.
this.$navigateTo(NewModal, {
frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));
"frame-ref" throws TypeError: Cannot read property 'id' of undefined
"frame-id" throws TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function
I want to confirm if I am using the prism navigation service with xamarin forms correctly. I have a master detail page, a styled navigation page and a bunch of content pages.
right now I am using the service in the following way:
var prj = await dataService.GetLwdProject(appState.SelectedProjectId);
var nparam = new NavigationParameters();
nparam.Add("Project", prj);
await NavigateTo("RootPage/StyledNavigationPage/SessionsListPage", nparam);
Where the Master detail page is the RootPage object. So expecting that when a user selects an item from this list page the correct way to the service should be:
var nparma = new NavigationParameters();
nparma.Add("Session", option);
await App.NavigateTo("RootPage/StyledNavigationPage/SessionsListPage?ProjectId=" + option.ProjectId + "/LocationListPage", nparma);
What I expect that just a LocationListPage would be added to the navigation stack, but when I use the the hardware back button on android it looks like that not only the last page was added but the whole path (all pages). So is this the correct way auto construct the desired path?
No. Navigation is always relative to where you are calling it. What you have now will navigate to the entire deep link you have created every time. Just navigate to your target NavigationPage/SessionListPage and pass your parameter. Though, you won't get a new page every time in this case, since you are navigating to the same view, but just passing different state.