React Navigation 入门

React Navigation 诞生于 React Native 社区对完全用 JavaScript 编写的可扩展且易于使用的导航解决方案的需求（这样你就可以阅读和理解所有源代码），在强大的原生基元之上。

预备知识

如果你已经熟悉 React Native，那么你将能够快速使用 React Navigatio！如果没有，你可能想先阅读 React Native Express 的第 1 至 4 节（包括第 4 节），然后在完成后回到这里。

在本文档的基础部分中，接下来是React导航最重要的方面。它应该足以让你了解如何构建典型的小型移动应用程序，并为你深入研究 React Navigation 的更高级部分提供背景知识。

Hello React Navigation

在 Web 浏览器中，您可以使用锚点（<a>）标记链接到不同的页面。当用户单击链接时，URL 被推到浏览器历史堆栈中。当用户按下 back 按钮时，浏览器会从历史堆栈的顶部弹出该项目，因此活动的页面现在就是以前访问过的页面。React Native 不像 web 浏览器那样有内置的全局历史堆栈概念——这就是 React Navigation 的大展身手的地方。

React Navigation 的 StackNavigator 为应用程序提供了在屏幕之间转换和管理导航历史的方法。如果您的应用程序只使用一个 StackNavigator，那么它在概念上类似于 web 浏览器处理导航状态的方式——当用户与它交互时，您的应用程序从导航堆栈中推送和弹出项目，这将导致用户看到不同的屏幕。它在 web 浏览器和 React Navigation 中的工作方式的一个关键区别是，React Navigation 的堆栈导航器提供了在 Android 和 iOS 中 StackNavigator 中的路由时所期望的手势和动画。

要开始使用 React Navigation，我们只需要一个 StackNavigator。

安装 StackNavigator

npm install react-navigation

目前最新版是 1.0.0

创建 StackNavigator

StackNavigator 是一个返回 React 组件的函数。它接受一个路由配置对象和一个可选的选项对象（现在我们在下面省略它）。因为 StackNavigator 函数返回一个 React 组件，我们可以直接从 App.js 中导出它作为我们应用程序的根组件。

// In App.js in a new project

import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } 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 StackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

运行代码

如果您运行这段代码，您将看到屏幕有一个空导航栏和包含 HomeScreen 组件的灰色内容区域 (如上所示)。您看到的导航栏和内容区域的样式是 StackNavigator 的默认配置，稍后我们将学习如何配置它们。

路由名称的大小写并不重要——您可以使用小写的 home 或大写的 Home，这取决于您。我们喜欢把路由名称大写。

路由唯一需要的配置就是 screen 组件。您可以在 StackNavigator 参考资料中阅读有关其他可用选项的更多信息。

在 React Native 中，从 app .js 导出的组件是应用程序入口（或根组件）——它是所有其他组件的派生组件。与导出StackNavigator 相比，在应用的根目录对组件有更多的控制，这通常很有用，所以让我们导出一个只渲染我们的StackNavigator 的组件。

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

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

添加第二个路由

<RootStack /> 组件不接受任何 props ——所有配置都在 StackNavigator 函数的 options 参数中指定。我们将选项留空，因此它只使用默认配置。为了看一个使用 options 对象的例子，我们将在 StackNavigator 中添加第二个屏幕。

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

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

// Other code for App component here...

现在我们的堆栈有两个路由，一个 Home 路由和一个 Details 路由。Home路由对应于HomeScreen 组件，Details 路由对应于 DetailsScreen 组件。栈的初始路由是主路由。这时候自然会问：“我如何从Home路径移动到Details路径？”这将在下一节中介绍。

总结

• React Native 没有像 web 浏览器那样的内置导航 API。React Navigation 为您提供了这个功能，以及 iOS 和 Android 在屏幕之间切换的手势和动画。
• StackNavigator 是一个函数，它接受一个路由配置对象和一个选项对象，并返回一个 React 组件。
• 路由配置对象中的键是路由名称，值是该路由的配置。配置中唯一必需的属性是 screen（用于路由的组件）。
• 要指定栈中的初始路由，需要在栈选项对象上 提供 initialRouteName。
• 这是我们迄今为止建造的全部资源

😆Happy animation!