From cc2f265fb77aa00b75e8a0bd7ec0d983948d7656 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 24 Aug 2016 17:47:32 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/using-navigators.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/releases/next/docs/using-navigators.html b/releases/next/docs/using-navigators.html index ded65dcb18d..267f12935ba 100644 --- a/releases/next/docs/using-navigators.html +++ b/releases/next/docs/using-navigators.html @@ -1,5 +1,5 @@ Using Navigators – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Using Navigators #

Mobile apps rarely consist of just one screen. As soon as you add a second screen to your app, you will have to take into consideration how the user will navigate from one screen to the other.

You can use navigators to transition between multiple screens. These transitions can be typical side-to-side animations down a master/detail stack, or vertical modal popups.

Navigator #

React Native has several built-in navigation components, but for your first app you will probably want to use Navigator. It provides a JavaScript implementation of a navigation stack, so it works on both iOS and Android and is easy to customize.

Working with Scenes #

At this point you should feel comfortable rendering all sorts of components in your app, be it a simple View with Text inside, or a ScrollView with a list of Images. Together, these components make up a scene (another word for screen) in your app.

A scene is nothing other than a React component that is typically rendered full screen. This is in contrast to a Text, an Image, or even a custom SpinningBeachball component that is meant to be rendered as part of a screen. You may have already used one without realizing it - the "HelloWorldApp", the "FlexDirectionBasics", and the "ListViewBasics" components covered earlier in the tutorial are all examples of scenes.

For simplicity's sake, let's define a simple scene that displays a bit of text. We will come back to this scene later as we add navigation to our app. Create a new file called "MyScene.js" with the following contents:

import React, { Component } from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, Navigator } from 'react-native'; export default class MyScene extends Component { static get defaultProps() {