Remove reference to deprecated Navigator.js
Summary: Navigator.html no longer exists. Fixes #13620. Closes https://github.com/facebook/react-native/pull/13672 Differential Revision: D4960726 Pulled By: hramos fbshipit-source-id: 00beb2f11ab347227e1a703b8b1f4cea2701f838
This commit is contained in:
Hector Ramos
Facebook Github Bot
parent
39c73a842f
commit
67a3b4c224
|
|
@ -8,15 +8,17 @@ next: images
|
|||
previous: animations
|
||||
---
|
||||
|
||||
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation.
|
||||
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use [React Navigation](docs/navigation.html#react-navigation).
|
||||
|
||||
If you are only targeting iOS and would like to stick to the native look and feel, check out `NavigatorIOS`. The `Navigator` component is older but has been thoroughly tested in production.
|
||||
If you are only targeting iOS and would like to stick to the native look and feel, check out [NavigatorIOS](docs/navigation.html#navigatorios).
|
||||
|
||||
If you're targeting both iOS and Android, the following libraries provide native navigation on both platforms: [native-navigation](http://airbnb.io/native-navigation/), [react-native-navigation](https://github.com/wix/react-native-navigation).
|
||||
|
||||
## React Navigation
|
||||
|
||||
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
|
||||
|
||||
The first step is to install in your app:
|
||||
The first step is to install in your project:
|
||||
|
||||
```
|
||||
npm install --save react-navigation
|
||||
|
|
@ -30,15 +32,15 @@ import {
|
|||
} from 'react-navigation';
|
||||
|
||||
const App = StackNavigator({
|
||||
Main: {screen: MainScreen},
|
||||
Profile: {screen: ProfileScreen},
|
||||
Home: { screen: HomeScreen },
|
||||
Profile: { screen: ProfileScreen },
|
||||
});
|
||||
```
|
||||
|
||||
Each screen component can set navigation options such as the header title. It can use action creators on the `navigation` prop to link to other screens:
|
||||
|
||||
```
|
||||
class MainScreen extends React.Component {
|
||||
class HomeScreen extends React.Component {
|
||||
static navigationOptions = {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
|
@ -58,23 +60,13 @@ class MainScreen extends React.Component {
|
|||
|
||||
React Navigation routers make it easy to override navigation logic or integrate it into redux. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.
|
||||
|
||||
The views in React Navigation use native components and the `Animated` library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
|
||||
The views in React Navigation use native components and the [`Animated`](docs/animated.html) library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
|
||||
|
||||
For a complete intro to React Navigation, follow the [getting started guide](https://reactnavigation.org/docs/intro/), or browse other docs such as the [intro to navigators](https://reactnavigation.org/docs/navigators/).
|
||||
|
||||
## Navigator
|
||||
|
||||
Like React Navigation, `Navigator` provides a JavaScript implementation of a navigation stack, so it works on both iOS and Android and is easy to customize. Navigator was released alongside React Native in 2015, so it predates the Animated library with native-thread animations.
|
||||
|
||||
|
||||
|
||||
`Navigator` can be adapted to render different components based on the current route in its `renderScene` function. It will transition new scenes onto the screen by sliding in from the right by default, but you can control this behavior by using the `configureScene` function. You can also configure a navigation bar through the `navigationBar` prop.
|
||||
|
||||
Check out the [Navigator API reference](docs/navigator.html) for specific examples that cover each of these scenarios.
|
||||
For a complete intro to React Navigation, follow the [React Navigation Getting Started Guide](https://reactnavigation.org/docs/intro/), or browse other docs such as the [Intro to Navigators](https://reactnavigation.org/docs/navigators/).
|
||||
|
||||
## NavigatorIOS
|
||||
|
||||
If you are targeting iOS only, you may also want to consider using [NavigatorIOS](docs/navigatorios.html). It looks and feels just like [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), because it is actually built on top of it.
|
||||
If you are targeting iOS only, you may also want to consider using [`NavigatorIOS`](docs/navigatorios.html). It looks and feels just like [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), because it is actually built on top of it.
|
||||
|
||||
|
||||
|
||||
|
|
@ -93,10 +85,11 @@ Like other navigation systems, `NavigatorIOS` uses routes to represent screens,
|
|||
As `NavigatorIOS` leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.
|
||||
|
||||
```javascript
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { NavigatorIOS, Text, TouchableHighlight, View } from 'react-native';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, NavigatorIOS, Text, View } from 'react-native';
|
||||
|
||||
export default class NavigatorIOSApp extends Component {
|
||||
export default class NavigatorIOSApp extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<NavigatorIOS
|
||||
|
|
@ -110,7 +103,7 @@ export default class NavigatorIOSApp extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
class MyScene extends Component {
|
||||
class MyScene extends React.Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
navigator: PropTypes.object.isRequired,
|
||||
|
|
@ -131,9 +124,10 @@ class MyScene extends Component {
|
|||
return (
|
||||
<View>
|
||||
<Text>Current Scene: { this.props.title }</Text>
|
||||
<TouchableHighlight onPress={this._onForward}>
|
||||
<Text>Tap me to load the next scene</Text>
|
||||
</TouchableHighlight>
|
||||
<Button
|
||||
onPress={this._onForward}
|
||||
title="Tap me to load the next scene"
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -141,15 +135,3 @@ class MyScene extends Component {
|
|||
```
|
||||
|
||||
Check out the [`NavigatorIOS` reference docs](docs/navigatorios.html) to learn more about this component.
|
||||
|
||||
> You may also want to check out [react-native-navigation](https://github.com/wix/react-native-navigation), a component that aims to provide native navigation on both iOS and Android.
|
||||
|
||||
## NavigationExperimental
|
||||
|
||||
Since early 2016, React Native has shipped with an experimental re-implementation of the original `Navigator` component called `CardStack`. The major benefit it had over `Navigator` is the smooth native-thread animations provided by the Animated library.
|
||||
|
||||
Because `NavigationExperimental` only included view components, it required a lot of boilerplate to use by itself. Several libraries sprung up around it, making it easier to use. Libraries such as `react-native-router-flux` and `ex-navigation` wrapped NavigationExperimental views in an easier-to-use API. Authors of many of these libraries now support React Navigation.
|
||||
|
||||
The `CardStack` and other NavigationExperimental views live on as a part of the React Navigation project. The new library aims to be easy to use, while continuing to enable the smooth and customizable animations that NavigationExperimental pioneered.
|
||||
|
||||
As of React Native 0.43, `NavigationExperimental` is deprecated. It will be removed from the codebase in a later version.
|
||||
|
|
|
|||
Loading…
Reference in New Issue