mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
131 lines
31 KiB
HTML
131 lines
31 KiB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Navigating Between Screens · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Navigating Between Screens · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/next/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>The Basics</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/tutorial.html">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/props.html">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/state.html">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/style.html">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/height-and-width.html">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/flexbox.html">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/handling-text-input.html">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/handling-touches.html">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/using-a-scrollview.html">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/using-a-listview.html">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/network.html">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/more-resources.html">More Resources</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/components-and-apis.html">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/platform-specific-code.html">Platform Specific Code</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-native/docs/next/navigation.html">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/images.html">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/animations.html">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/accessibility.html">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/improvingux.html">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/timers.html">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/debugging.html">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/performance.html">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/gesture-responder-system.html">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/javascript-environment.html">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/direct-manipulation.html">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/colors.html">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/integration-with-existing-apps.html">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/building-for-apple-tv.html">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/running-on-device.html">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/upgrading.html">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides (iOS)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-modules-ios.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-components-ios.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/linking-libraries-ios.html">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/running-on-simulator-ios.html">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/communication-ios.html">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/app-extensions.html">App Extensions</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides (Android)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-modules-android.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-components-android.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/headless-js-android.html">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/signed-apk-android.html">Generating Signed APK</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="navGroup navGroupActive"><h3>Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/contributing.html">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/maintainers.html">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/testing.html">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/understanding-cli.html">Understanding the CLI</a></li></ul></div><div class="navGroup navGroupActive"><h3>Components</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/activityindicator.html">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/datepickerios.html">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/flatlist.html">FlatList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/listview.html">ListView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/maskedviewios.html">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/modal.html">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/navigatorios.html">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/picker.html">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/pickerios.html">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/progressbarandroid.html">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/progressviewios.html">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/refreshcontrol.html">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/scrollview.html">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/sectionlist.html">SectionList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/segmentedcontrolios.html">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/snapshotviewios.html">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/statusbar.html">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/switch.html">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/tabbarios.html">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/tabbarios-item.html">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/textinput.html">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/toolbarandroid.html">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchablehighlight.html">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchableopacity.html">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/view.html">View</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/viewpagerandroid.html">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/virtualizedlist.html">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/webview.html">WebView</a></li></ul></div><div class="navGroup navGroupActive"><h3>APIs</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/accessibilityinfo.html">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/actionsheetios.html">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/alert.html">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/alertios.html">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/animated.html">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/appregistry.html">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/appstate.html">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/asyncstorage.html">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/backandroid.html">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/backhandler.html">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/cameraroll.html">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/clipboard.html">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/datepickerandroid.html">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/dimensions.html">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/easing.html">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/geolocation.html">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imageeditor.html">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imagepickerios.html">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imagestore.html">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/image-style-props.html">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/interactionmanager.html">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/keyboard.html">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/layout-props.html">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/layoutanimation.html">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/linking.html">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/listviewdatasource.html">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/netinfo.html">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/panresponder.html">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/permissionsandroid.html">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/pixelratio.html">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/pushnotificationios.html">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/settings.html">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/shadow-props.html">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/share.html">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/statusbarios.html">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/stylesheet.html">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/systrace.html">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/text-style-props.html">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/timepickerandroid.html">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/toastandroid.html">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/transforms.html">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/vibration.html">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/vibrationios.html">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/view-style-props.html">View Style Props</a></li></ul></div></div></section></div><script>
|
||
var toggler = document.getElementById('navToggler');
|
||
var nav = document.getElementById('docsNav');
|
||
toggler.onclick = function() {
|
||
nav.classList.toggle('docsSliderActive');
|
||
};
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank">Edit</a><h1>Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||
<p>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 <a href="/react-native/docs/next/navigation.html#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as <a href="https://reactnavigation.org/docs/guides/redux">redux</a>.</p>
|
||
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/next/navigation.html#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
|
||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: <a href="http://airbnb.io/native-navigation/">native-navigation</a>, <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||
<h2><a class="anchor" aria-hidden="true" name="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||
<p>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.</p>
|
||
<p>The first step is to install in your project:</p>
|
||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save react-navigation</span>
|
||
</code></pre>
|
||
<p>Then you can quickly create an app with a home screen and a profile screen:</p>
|
||
<pre><code class="hljs"><span class="hljs-keyword">import</span> {
|
||
StackNavigator,
|
||
} from <span class="hljs-string">'react-navigation'</span>;
|
||
|
||
const App = StackNavigator({
|
||
Home: { screen: HomeScreen },
|
||
Profile: { screen: ProfileScreen },
|
||
});
|
||
</code></pre>
|
||
<p>Each screen component can set navigation options such as the header title. It can use action creators on the <code>navigation</code> prop to link to other screens:</p>
|
||
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeScreen</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||
static navigationOptions = {
|
||
title: <span class="hljs-symbol">'Welcom</span>e',
|
||
};
|
||
render() {
|
||
const { navigate } = <span class="hljs-keyword">this</span>.props.navigation;
|
||
<span class="hljs-keyword">return</span> (
|
||
<<span class="hljs-type">Button</span>
|
||
title=<span class="hljs-string">"Go to Jane's profile"</span>
|
||
onPress={() =>
|
||
navigate(<span class="hljs-symbol">'Profil</span>e', { name: <span class="hljs-symbol">'Jan</span>e' })
|
||
}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
</code></pre>
|
||
<p>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.</p>
|
||
<p>The views in React Navigation use native components and the <a href="/react-native/docs/next/animated.html"><code>Animated</code></a> library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.</p>
|
||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>NavigatorIOS</h2>
|
||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.gif" alt=""></p>
|
||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||
initialRoute={{
|
||
<span class="hljs-attr">component</span>: MyScene,
|
||
<span class="hljs-attr">title</span>: <span class="hljs-string">'My Initial Scene'</span>,
|
||
<span class="hljs-attr">passProps</span>: {<span class="hljs-attr">myProp</span>: <span class="hljs-string">'foo'</span>},
|
||
}}
|
||
/>
|
||
</code></pre>
|
||
<p>Like other navigation systems, <code>NavigatorIOS</code> uses routes to represent screens, with some important differences. The actual component that will be rendered can be specified using the <code>component</code> key in the route, and any props that should be passed to this component can be specified in <code>passProps</code>. A "navigator" object is automatically passed as a prop to the component, allowing you to call <code>push</code> and <code>pop</code> as needed.</p>
|
||
<p>As <code>NavigatorIOS</code> leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.</p>
|
||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||
<span class="hljs-keyword">import</span> PropTypes <span class="hljs-keyword">from</span> <span class="hljs-string">'prop-types'</span>;
|
||
<span class="hljs-keyword">import</span> {Button, NavigatorIOS, Text, View} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||
|
||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NavigatorIOSApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||
render() {
|
||
<span class="hljs-keyword">return</span> (
|
||
<NavigatorIOS
|
||
initialRoute={{
|
||
component: MyScene,
|
||
title: 'My Initial Scene',
|
||
passProps: {index: 1},
|
||
}}
|
||
style={{flex: 1}}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
class MyScene extends React.Component {
|
||
static propTypes = {
|
||
route: PropTypes.shape({
|
||
title: PropTypes.string.isRequired,
|
||
}),
|
||
navigator: PropTypes.object.isRequired,
|
||
};
|
||
|
||
constructor(props, context) {
|
||
super(props, context);
|
||
this._onForward = this._onForward.bind(this);
|
||
}
|
||
|
||
_onForward() {
|
||
let nextIndex = ++this.props.index;
|
||
this.props.navigator.push({
|
||
component: MyScene,
|
||
title: 'Scene ' + nextIndex,
|
||
passProps: {index: nextIndex},
|
||
});
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<View>
|
||
<Text>Current Scene: {this.props.title}</Text>
|
||
<Button
|
||
onPress={this._onForward}
|
||
title="Tap me to load the next scene"
|
||
/>
|
||
</View>
|
||
);
|
||
}
|
||
}
|
||
</code></pre>
|
||
<p>Check out the <a href="/react-native/docs/next/navigatorios.html"><code>NavigatorIOS</code> reference docs</a> to learn more about this component.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="platform-specific-code.html">← Platform Specific Code</a><a class="docs-next button" href="images.html">Images →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-41298772-2', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||
var search = docsearch({
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["tags:next"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |