In order to have multiple screens in an app, we need a method of moving between them. React Native provides the NavigatorIOS component which does exactly this and I’ve been having a play around with its basic usage. Here’s the result:
First up, let’s set up all of our module includes and whatnot:
Standard stuff - notice that we require the NavigatorIOS component. Now on to the main app component:
Ah, there you are NavigatorIOS! The important bit is the
initialRoute prop, which is supplied with some fairly self-explanatory values:
component - the first component to be shown inside the NavigatorIOS, in this case
title - the initial text inside the navigation toolbar;
rightButtonTitle - the text for the button on the right side of the toolbar;
onRightButtonPress - a handler function for when that button is pressed.
Notice too that we’ve added a
ref prop to the NavigatorIOS which allows us to grab a reference to it from our
onRightButtonPress handler. In there, we call the
push method on the NavigatorIOS - which is part of its underlying Navigator instance - with the same kind of parameters as we used for the
initialRoute, but this time we’re passing in a component called
ForRightScene which we’ll look at shortly. First though, let’s take a look at the
The guts of this is a TouchableHighlight that triggers the
onPress handler. Because components under the control of the NavigatorIOS will always have a
navigator prop automatically set, we can grab that and use it to push a new component -
ForTouchScene - into the routing stack.
The what? Oh, the routing stack. Every time you
push a new scene component it gets added to a stack of routes that you can later
pop. This gives you a history of all the scenes that you’ve navigated and allows you to step back through them. The NavigatorIOS will have a back button in cases where there’s a stack and will auto-pop components when the back button’s pressed.
That’s pretty much it. The ForTouchScene and ForRightScene components look like this:
Super-simple. The rest of the app looks like this:
There’s one slight quirk here which is that unless you specify otherwise, your content will be hidden under the navigation toolbar. To counter this, we set a top padding of 64 to clear the nav bar and an additional ten on top of that to balance it with the padding for the other sides. We use this in our components like this:
This technique - using an array of styles - allows us to combine two sets of styling, using one as a base and another which is specific to this particular component.