Navigate Between Pages In NativeScript With Parameters

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial we will learn how to navigate between pages in NativeScript and we will pass parameters as well between pages.

In the previous tutorial we saw how to create new pages in NativeScript, this tutorial will start off where we left of there. So if you arrived at this tutorial directly I strongly suggest you read the previous tutorial first.

 

Step 6) Adding A Button To Click On

We are starting of at step-6 as we left off at step-5 in the previous tutorial. Here we will create a button in the main-page.xml , the thing that we want to achieve is that when we tap on the button we will navigate to pageTwo. Here I am using a button for navigation for the sake of keeping things simple but you can navigate any way you see fit for your app.

As you can see the text of the button is Navigate and we have set the tap method to call a function called changePage that we will write next.

 

Step 7) Coding The Navigation Functionality

Now let’s go ahead and code the main-page.js file and put the following code in it.

Navigation in NativeScript is done using the ui/frame module. We are importing the ui/frame module on line 2 and storing the instance in a variable called frameModule.

On line 18 we are navigating using the topmost().navigate() methods of frameModule. We are passing an object called navigationOptions which we have created between line 11 to 16.

The navigationOptions object has two properties, the first is moduleName which is the path of the page / module where we want to navigate to and the second property is an object name context which had key value pairs of parameters that will be passed to the navigated page in this case pageTwo. A thing to note is that we do not have any file extension in the path of the page in moduleName property.

 

Step 8) Receiving Parameters In NativeScript

Parameters are received in the navigation context of the page being navigated to. So in our example we will have the following code in pageTwo.js file

We have the same function onNavigatingTo that we coded in the previous tutorial which is the function that is called in when the page loads. Inside the function we can get the parameters using page.navigationContext which we are getting on line 4.

On line 5 and 6 I am just logging the individual values which can be extracted using the dot notation (.) i.e, gotData.param1 and gotData.param2 .

 

Learn More About NativeScript in my NativeScript Jumpstart For Beginners Course on Udemy.com Click here for a great discount.

Conclusion

Navigation is one of the most important part of any app and understanding how it works is essential for a good user experience. Fortunately for us NativeScript makes it easy to handle navigation using the ui/frame module.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)