#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 (
      
        登录页面
         this.props.navigation.navigate('Home')} />
      
    );
  }
}

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 (
      
        主页
         this.props.navigation.goBack()} />
        {' 使用popToTop,回到栈的最上层 '}
         this.props.navigation.popToTop()} />
      
    );
  }
}

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 {
  render() {
    return (
      
    );
  }
}

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 (
      
        登录页面
        {' 点击下面按钮不会产生新的栈 '}
         this.props.navigation.navigate('Login')} />
      
    );
  }
}

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

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

  render() {
    return (
      
        登录页面
        {' 使用push,将LoginScreen再次添加到栈中 '}
         this.props.navigation.push('Login')} />
      
    );
  }
}