【React Navigation】二、createStackNavigator-堆栈导航器

在Web浏览器中，你可以通过（）标签跳转到不同的页面。当用户单击某个链接时，当前的URL将保存到到浏览器历史记录堆栈。当用户按下后退按钮时，浏览器会从历史堆栈的顶部弹出上一个访问的URL，因此可以切换回到先前访问过的页面。 React Native没有像Web浏览器那样内置全局历史堆栈的功能。

而React Navigation则为您的应用提供了一种在屏幕切换和管理导航历史记录的方法。如果您的应用程序仅使用一个堆栈导航器，那么它在概念上类似于Web浏览器处理导航状态的方式 - 当用户与其交互时，您的应用程序会从导航堆栈中推送和弹出项目，这会导致用户看到不同的屏幕。但Web浏览器和React Navigation的主要区别在于：在切换不同的页面时，React Navigation的堆栈导航器实现了类似于原生（Android和iOS）的手势交互和动画效果。

我们首先从React Navigation中一个名为createStackNavigator的函数开始着手。

创建一个堆栈导航器

因为createStackNavigator函数会返回一个React组件，我们可以直接App.js中使用它作为App的根组件。

// In App.js in a new project
// 在App.js中替换以上代码，然后运行

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

当运行该程序，你可以看到整个页面中包含了一个空的导航条和一个包含了HomeScreen组件的灰色内容区域。这是堆栈导航器的默认风格，稍后的章节我们会学习如何去配置这些风格和样式。

重点：
1. 路由名称不区分大小写
2. 每个路由必须配置screen组件

我们还可以使用createStackNavigator函数将堆栈导航器保存成一个RootStack组件，作为我们的App.js中的跟组件

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

路由的快速配置

// 可以省略大括号
const RootStack = createStackNavigator({
  Home: HomeScreen
});

增加第二个路由

组件没有配置其他的属性 - 所有配置都在createStackNavigator函数的options参数中指定。我们将选项留空，因此它只使用默认配置。为了查看使用options对象的示例，我们将向堆栈导航器添加第二个屏幕。

// Other code for HomeScreen here...

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

// Other code for App component here...

现在导航器包含了两个路由：Home路由与HomeScreen组件关联，Details路由与DetailsScreen组件关联。我们使用Home路由作为程序初始化的路由。

这时我们会自然想到一个问题：怎么从Home路由跳转到Details路由呢？我们将在下一个环节介绍。

总结

React Native没有提供像Web浏览器那样的内置导航API。而React Navigation则为你提供了该功能，你甚至还可以使用它来实现iOS和Android平台的手势切换交互以及屏幕转换的动画。
createStacknavigator函数允许你通过配置路由以及其他的属性，并返回一个React组件
路由配置对象中的键是路由名称，值是该路由的配置。配置中唯一需要的属性是屏幕（用于路径的组件）。
可以使用initialRouteName来指定堆栈导航器中的初始路由

Comments