React Navigation 5.x 版本实战指南

2023-09-04 09:51:38

React Navigation 5.x 版本实战指南

简介

React Navigation 是一个用于构建 React Native 应用路由的库。它提供了多种内置的导航组件，包括 StackNavigator、TabNavigator 和 DrawerNavigator，使您可以轻松地创建复杂的用户界面。在本文中，我们将介绍 React Navigation 5.x 版本 的用法，从基础概念到实战应用，循序渐进，深入浅出，助您轻松掌握 React Navigation。

基础概念

1. 路由

路由是应用程序页面的抽象概念。在单页面的应用中，路由并不存在。但是，对于拥有多个页面的应用程序来说，如何从一个页面平滑地过渡到另一个页面，就是路由需要完成的事情。

2. 导航

导航是应用程序在路由之间切换的机制。React Navigation 提供了多种内置的导航组件，包括 StackNavigator、TabNavigator 和 DrawerNavigator，使您可以轻松地创建复杂的用户界面。

3. 组件

组件是构成视图元素的基本单位。在 React Native 中，组件是 JavaScript 函数，它们了 UI 应该如何渲染。React Navigation 提供了多种内置的导航组件，它们都是 React 组件。

实战应用

接下来，我们将通过一个实战项目来演示如何使用 React Navigation。我们将创建一个简单的**“记事本”应用程序** ，它允许用户创建、编辑和删除笔记。

1. 创建项目

首先，我们需要创建一个新的 React Native 项目。您可以使用以下命令：

npx react-native init NoteApp

2. 安装 React Navigation

接下来，我们需要安装 React Navigation。您可以使用以下命令：

yarn add react-navigation

3. 创建导航器

在项目中，我们需要创建一个导航器。导航器是负责管理应用程序路由的组件。在我们的例子中，我们将使用 StackNavigator 导航器。

import { createStackNavigator } from 'react-navigation-stack';
import NoteListScreen from './screens/NoteListScreen';
import NoteDetailScreen from './screens/NoteDetailScreen';

const StackNavigator = createStackNavigator({
  NoteList: {
    screen: NoteListScreen,
  },
  NoteDetail: {
    screen: NoteDetailScreen,
  },
});

export default StackNavigator;

4. 创建屏幕

接下来，我们需要创建两个屏幕：NoteListScreen 和 NoteDetailScreen。

NoteListScreen 是一个显示所有笔记的屏幕。

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const NoteListScreen = () => {
  const [notes, setNotes] = useState([]);

  return (
    <View>
      <Text>Note List</Text>
      <Button title="Add Note" onPress={() => {}} />
    </View>
  );
};

export default NoteListScreen;

NoteDetailScreen 是一个显示笔记详情的屏幕。

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const NoteDetailScreen = () => {
  const [note, setNote] = useState({});

  return (
    <View>
      <Text>Note Detail</Text>
      <Button title="Edit Note" onPress={() => {}} />
      <Button title="Delete Note" onPress={() => {}} />
    </View>
  );
};

export default NoteDetailScreen;

5. 配置导航器

最后，我们需要将导航器配置到应用程序中。

import React from 'react';
import { createAppContainer } from 'react-navigation';
import StackNavigator from './StackNavigator';

const App = () => {
  return (
    <AppContainer>
      <StackNavigator />
    </AppContainer>
  );
};

export default App;