Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce navigators in the tutorial #8515

Closed
wants to merge 5 commits into from
Closed

Introduce navigators in the tutorial #8515

wants to merge 5 commits into from

Conversation

hramos
Copy link
Contributor

@hramos hramos commented Jun 30, 2016

Adds a new section to the tutorial. Covers the basics of scenes and navigators.

The navigator comparison doc has been moved to docs/navigation.html in this PR.

navigators

Next up:
- Include images that describe navigation stacks
- Expand navigation guide to document nav bars
- Add iOS vs Android considerations (animation direction, nav bars)
@ghost
Copy link

ghost commented Jun 30, 2016

By analyzing the blame information on this pull request, we identified @lacker and @vjeux to be potential reviewers.

@ghost ghost added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jun 30, 2016
Mobile apps rarely consist of just one scene (another word for screen). As soon as you add a second scene to your app, you will have to take into consideration how the user will navigate from one scene to the other.

You can use navigators to transition between multiple scenes. These transitions can be typical side-to-side animations down a master/detail stack, or vertical modal popups.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, I recommend you check out the
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this sentence is missing the

Copy link
Contributor Author

@hramos hramos Jun 30, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I meant to that sentence.

@lacker
Copy link
Contributor

lacker commented Jun 30, 2016

Just some nit picking, overall this looks really good!

}
```

Something you will encounter a lot when dealing with navigation is the concept of routes. A route is an object that contains information about a scene. It is used to provide all the context that the navigator's `renderScene` function needs to render a scene. In the example above, we can distinguish between different scenes through the `title` key in the route.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor, but it may be worth mention that you can use any key to distinguish your scene. In your case you just happened to pick "title"

@caabernathy
Copy link
Contributor

Great intro.

@caabernathy
Copy link
Contributor

@facebook-github-bot shipit

@ghost ghost added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Jul 1, 2016
@ghost
Copy link

ghost commented Jul 1, 2016

Thanks for importing. If you are an FB employee go to Phabricator to review.

@ghost ghost closed this in 7d3fbbd Jul 1, 2016
bestander pushed a commit that referenced this pull request Jul 12, 2016
* Introduce navigators in the tutorial

Summary:
Adds a new section to the tutorial. Covers the basics of scenes and navigators.

The navigator comparison doc has been moved to docs/navigation.html in this PR.

![navigators](https://cloud.githubusercontent.com/assets/165856/16505919/37459e3a-3ed4-11e6-87e9-5fa7e6f792d3.png)
Closes #8515

Differential Revision: D3507325

Pulled By: caabernathy

fbshipit-source-id: e9ee5b2572868189af198cdf461b2728dfa84f9e

* Fix links from networking to navigation in The Basics.

Summary:
Fixes #8611.

Once this lands, we may want to cherry-pick it into 0.29 to fix the broken links.
Closes #8698

Differential Revision: D3544388

Pulled By: JoelMarcey

fbshipit-source-id: d5132b112e3079d1fd9ab6d84ff1a4328bee871f
samerce pushed a commit to iodine/react-native that referenced this pull request Aug 23, 2016
Summary:
Adds a new section to the tutorial. Covers the basics of scenes and navigators.

The navigator comparison doc has been moved to docs/navigation.html in this PR.

![navigators](https://cloud.githubusercontent.com/assets/165856/16505919/37459e3a-3ed4-11e6-87e9-5fa7e6f792d3.png)
Closes facebook#8515

Differential Revision: D3507325

Pulled By: caabernathy

fbshipit-source-id: e9ee5b2572868189af198cdf461b2728dfa84f9e
mpretty-cyro pushed a commit to HomePass/react-native that referenced this pull request Aug 25, 2016
Summary:
Adds a new section to the tutorial. Covers the basics of scenes and navigators.

The navigator comparison doc has been moved to docs/navigation.html in this PR.

![navigators](https://cloud.githubusercontent.com/assets/165856/16505919/37459e3a-3ed4-11e6-87e9-5fa7e6f792d3.png)
Closes facebook#8515

Differential Revision: D3507325

Pulled By: caabernathy

fbshipit-source-id: e9ee5b2572868189af198cdf461b2728dfa84f9e
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Import Started This pull request has been imported. This does not imply the PR has been approved.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants