React Navigation--Stack Navigator Simple Example

本程序功能：两个页面，第一个页面有一个按钮，点击按钮跳转到第二个页面，按返回键可以返回到第一个页面，按标题栏的返回按钮也可以返回到第一个页面。

这是一个最简单的React Navigation。

/** * Created by YiBing on 2017/5/4. * Introducing Stack Navigator: * The title of the HomeScreen is configurable on the static navigationOptions, * where many options can be set to configure the presentation of the screen in the navigator. */import React from 'react';import {    AppRegistry,    Text,    Button,    View,} from 'react-native';import { StackNavigator } from 'react-navigation';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: 'yb'})} //Passing params                    title="Chat with Lucy"                />            </View>        );    }}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>        );    }}const SimpleAppReactNavigation = StackNavigator({    Home: { screen: HomeScreen },    Chat: { screen: ChatScreen },});AppRegistry.registerComponent('SimpleAppReactNavigation', () => SimpleAppReactNavigation);