From f8a6f2fde5d3f2c943f90eac3c7da8acd644fbf7 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Mon, 11 Jul 2016 21:51:03 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/network.html | 2 +- releases/next/docs/using-navigators.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/releases/next/docs/network.html b/releases/next/docs/network.html index 763be3e13c5..2fa037f50c7 100644 --- a/releases/next/docs/network.html +++ b/releases/next/docs/network.html @@ -60,7 +60,7 @@ ws.onerror = ws.onclose = (e) => { // connection closed console.log(e.code, e.reason); -};

Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about navigators.

Next →

Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!

Take Survey
© 2016 Facebook Inc.
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Using Navigators #

Edit on GitHub

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'; +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 #

Edit on GitHub

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'; export default class MyScene extends Component {