diff --git a/packages/react-navigation/docs/guides/Guide-Intro.md b/packages/react-navigation/docs/guides/Guide-Intro.md index 6cfdd824..de1ddbd4 100644 --- a/packages/react-navigation/docs/guides/Guide-Intro.md +++ b/packages/react-navigation/docs/guides/Guide-Intro.md @@ -6,7 +6,6 @@ Let's use React Navigation to build a simple chat application for Android and iO First, make sure you're [all set up to use React Native](http://facebook.github.io/react-native/docs/getting-started.html). Next, create a new project and add `react-navigation`: - ```sh # Create a new React Native App react-native init SimpleApp @@ -16,11 +15,13 @@ cd SimpleApp npm install --save react-navigation # Run the new app -react-native run-android # or: +react-native run-android +# or: react-native run-ios ``` If you are using `create-react-native-app` instead of `react-native init`, then: + ```sh # Create a new React Native App create-react-native-app SimpleApp @@ -41,13 +42,11 @@ Verify that you can successfully see the bare sample app run on iOS and/or Andro bare-project ``` -We want to share code on iOS and Android, so lets delete the contents of `index.ios.js` and `index.android.js` and replace it with `import './App';`. - -Now lets create the new file for our app implementation, `App.js`. +We want to share code on iOS and Android, so let's delete the contents of `index.ios.js` and `index.android.js` and replace it with `import './App';` - after which, we need to create create the new file for our app implementation, `App.js` (if you used `create-react-native-app` this has been already done) ## Introducing Stack Navigator -For our app, we want to use the `StackNavigator` because we want a conceptual 'stack' navigation, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen: +For our app, we want to use the `StackNavigator` because conceptually we want to obtain a 'card stack' effect of movement, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen: ```js import React from 'react'; @@ -66,14 +65,50 @@ class HomeScreen extends React.Component { } } -export default const SimpleApp = StackNavigator({ +export const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, }); -// if you are using create-react-native-app you don't need this line AppRegistry.registerComponent('SimpleApp', () => SimpleApp); ``` +If you used `create-react-native-app` the already existing `App.js` will be modified to + +```js +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { StackNavigator } from 'react-navigation'; + +class HomeScreen extends React.Component { + static navigationOptions = { + title: 'Welcome' + }; + render() { + return Hello, Navigation!; + } +} + +const SimpleApp = StackNavigator({ + Home: { screen: HomeScreen } +}); + +export default class App extends React.Component { + render() { + return ; + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center' + } +}); + +``` + The `title` of the screen is configurable on the [static `navigationOptions`](/docs/navigators/navigation-options), where many options can be set to configure the presentation of the screen in the navigator. Now the same screen should appear on both iPhone and Android apps: @@ -84,9 +119,15 @@ first-screen ## Adding a New Screen -In our `App.js` file, let's add a new screen called `ChatScreen`: +In our `App.js` file, let's add a new screen called `ChatScreen`, defining it under `HomeScreen`: ```js +// ... + +class HomeScreen extends React.Component { + //... +} + class ChatScreen extends React.Component { static navigationOptions = { title: 'Chat with Lucy', @@ -99,9 +140,10 @@ class ChatScreen extends React.Component { ); } } + ``` -We can then add a button to our `HomeScreen` component that links to `ChatScreen` using the `routeName` `Chat`. +We can then add a button to our `HomeScreen` component that links to `ChatScreen`: we need to use the provided method `navigate` (from the [screen navigation prop](/docs/navigators/navigation-prop)) by giving it the `routeName` of the screen we want to reach, in this case `Chat`. ```js class HomeScreen extends React.Component { @@ -123,10 +165,12 @@ class HomeScreen extends React.Component { } ``` -We're using the navigate function from the [screen navigation prop](/docs/navigators/navigation-prop) to go to `ChatScreen`. But that won't work until we add this to our `StackNavigator` like so: +(*don't forget to import View and Button from react-native: * `import { AppRegistry, Text, View, Button } from 'react-native';`) + +But that won't work until we say to our `StackNavigator` of the existence of the `Chat` screen, like so: ```js -export default const SimpleApp = StackNavigator({ +export const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen }, });