【源码】ReactNavigation/Hello Mobile

让我们使用React Naviation来创建一个简单的聊天会话应用，可以跨平台运行在安卓和iOS客户端。

[TOC]

Setup and Installation- 配置和安装

首先，确定你已经配置好了React Native开发环境；然后，创建一个新的项目；安装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

检查你的iOS或者安卓设备是否成功显示出了ReactNative的初始App界面。
我们想要在iOS和Android平台共享一份代码，让我们删除index.ios.js和index.android.js文件的内容，使用import './App'; 的写法。
现在为我们app的实现创建一个新的文件：App.js。

Introducing Stack Navigator -简介

对于我们的app，我们想要实现一个概念性的栈导航器，在这个导航器中，每一个新的场景组件都被放入到栈的顶部，并且返回时同样移除栈顶的那个场景组件。我们可以使用StackNavigator。让我们从一个组件场景的情况开始。

注意：场景组件既为一般的组件，该组件被react-navigation渲染成一个路由页面。

import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}

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

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

这个场景的标题在static navigationOptions中是可以配置的。那里有很多关于导航的选项都可以被配置。
现在同一个路由场景可以在iPhone和Android应用中出现。

Adding a New Screen-添加一个新的组件场景

在App.js文件中，让我们添加一个新的组件场景，叫做ChatScreen：

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

我们在HomeScreen组件中添加一个按钮，使用Chat的路由名称链接到ChatScreen。

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

我们使用的navigate函数来跳转到ChatScreen组件场景。该函数可以从当前场景（HomeScreen）的navigation属性中找到。但是想要实现跳转，我们必须将ChatScreen组件添加到我们的StackNavigator中：

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

现在你可以使用navigate函数跳转到一个新的组件场景，然后返回。

first-navigation-iphone.gif

Passing params-传递参数

ChatScreen组件场景强制固定所有参数的做法并不可取，如果我们可以传递一个参数到ChatScreen组件场景，这将比较有用。让我们开始做吧。在我们调用navigate函数，添加一个指定的路由名字的时候，我们可以传递参数pasrams到新的路由中。首先，我们编辑HomeScreen组件场景，传递一个user的参数到新的路由。

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

我们可以编辑ChatScreen组件场景，使用路由传过来的user参数：

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 (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

现在你可以看到，当你使用navigate函数跳转到ChatScreen路由页面时传递的name参数。尝试修改HomeScreen组件场景，看看将会发生什么。

first-navigation-iphone.png