#1 使用 'createStackNavigator&

本文使用React Navigation 版本为 V2.11.2. 初步感觉和V1变化不是很大，主要是APIs更加的语义化了一些。

下面是 StackNavigator 的一种基本用法

// screens/LoginScreen.js
import React, { PureComponent } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

export default class LoginScreen extends PureComponent {
  static navigationOptions = {
    header: null,
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>登录页面</Text>
        <Button title='导航到主页' onPress={() => this.props.navigation.navigate('Home')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

// screens/HomeScreen.js
import React, { PureComponent } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

export default class HomeScreen extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <Text>主页</Text>
        <Button title='返回到登录页面' onPress={() => this.props.navigation.goBack()} />
        {' 使用popToTop,回到栈的最上层 '}
        <Button title='回到栈中最上层的路由' onPress={() => this.props.navigation.popToTop()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

// App.js
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';


type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <AppStackNavigator />
    );
  }
}

const AppStackNavigator = createStackNavigator({
  Login: LoginScreen,
  // login: {
    //   screen: LoginScreen,
    // },
  Home: HomeScreen,
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

其中变化的点，列举如下：

1. 更加语义化

V1版本使用 StackNavigator 用来创建栈导航，V2使用 createStackNavigator:

// V1 版本
import { StackNavigator } from 'react-navigation';
const AppStackNavigator = StackNavigator({
  Login: {
    screen: LoginScreen,
  },
  Home: {
    screen: HomeScreen,
  },
});

// V2版本
import { createStackNavigator } from 'react-navigation';
const AppStackNavigator = createStackNavigator({
  Login: {
    screen: LoginScreen,
  },
  Home: {
    screen: HomeScreen,
  },
});

2.支持简写

比如：

const AppStackNavigator = createStackNavigator({
  Login: {
    screen: LoginScreen,
  },
  Home: {
    screen: HomeScreen,
  },
});

// 可以简写为
const AppStackNavigator = createStackNavigator({
  Login: LoginScreen,
  Home: HomeScreen,
});

3.navigation.navigate(routeName: String) 方法更加的智能

例如，加入当前路由处在 LoginScreen,但是使用上面方法再次导航到LoginScreen，react navigation 不会往路由栈中添加新的栈

export default class LoginScreen extends PureComponent {
  static navigationOptions = {
    header: null,
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>登录页面</Text>
        {' 点击下面按钮不会产生新的栈 '}
        <Button title='重复导航到LoginScreen' onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

如果希望产生新的栈，可以使用 this.props.navigation.push(routeName: String),则上面的写为：

export default class LoginScreen extends PureComponent {
  static navigationOptions = {
    header: null,
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>登录页面</Text>
        {' 使用push,将LoginScreen再次添加到栈中 '}
        <Button title='重复导航到LoginScreen' onPress={() => this.props.navigation.push('Login')} />
      </View>
    );
  }
}