React Navigation-Hello Mobile Navigation

让我们使用React Navigation为Android和iOS构建一个简单的聊天类应用程序。
Setup and Installation

安装步骤就不翻译了
First, make sure you're all set up to use React Native. Next, create a new project and add react-navigation:

# Create a new React Native App
react-native init SimpleApp
cd SimpleApp

# Install the latest version of react-navigation from npm
npm install --save react-navigation

# Run the new app
react-native run-android
# or:
react-native run-ios

If you are using create-react-native-app instead of react-native init, then:

# Create a new React Native App
create-react-native-app SimpleApp
cd SimpleApp

# Install the latest version of react-navigation from npm
npm install --save react-navigation

# Run the new app
npm start

# This will start a development server for you and print a QR code in your terminal.

Introducing StackNavigator

对于我们的应用程序，我们希望使用StackNavigator，因为从概念上讲，我们希望获得移动的“卡堆栈”效果，每个新的屏幕放在堆栈的顶部，然后从堆栈顶部移除一个屏幕。 我们从一个屏幕开始：

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'
  }
});

屏幕的标题可以在静态navigationOptions上配置，其中可以设置许多选项来配置导航器中的屏幕显示。

增一个新的界面

在我们的App.js文件中，我们添加一个名为ChatScreen的新屏幕，在HomeScreen下定义它：

// ...

class HomeScreen extends React.Component {
    //...
}

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      
        Chat with Lucy
      
    );
  }
}

我们可以添加一个按钮到我们的HomeScreen组件中，连接到ChatScreen组件。我们需要给方法navigate（navigation prop）提供我们想要达到的屏幕的路线名称。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
         navigate('Chat')}
          title="Chat with Lucy"
        />
      
    );
  }
}

但是，直到我们告诉我们的StackNavigator存在chat屏幕，才会起作用

export const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

传递参数

除了在导航函数中指定目标路由名称之外，我们还可以向新路由传递参数。 首先，我们编辑我们的HomeScreen组件，将user参数传递给路由。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
         navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      
    );
  }
}

然后，我们可以编辑我们的ChatScreen组件来显示通过路由传入的用户参数：

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      
        Chat with {params.user}
      
    );
  }
}

previous: 快速开始
next: 嵌套导航