如何在 React Native 中使用带有 React Navigation 的路由

笔记首页 >> 教程系列 >> 如何在 React Native 中使用带有 React Navigation 的路由

如何在 React Native 中使用带有 React Navigation 的路由

介绍

React Navigation是用于在React Native应用程序中进行路由和导航的流行库。

该库有助于解决在多个屏幕之间导航并在它们之间共享数据的问题。

在本教程结束时，您将拥有一个基本的社交网络。它将显示用户拥有的连接数，并提供一种与其他朋友联系的方式。您将使用此示例应用程序探索如何使用浏览移动应用程序屏幕react-navigation。

先决条件

要完成本教程，您需要：

Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。
熟悉设置环境以创建新的 React Native 项目并使用 iOS 或 Android 模拟器可能会有所帮助。

注意：如果您react-navigation过去使用过，您可能会遇到一些差异。您可以查阅有关从 3.x迁移和从 4.x 迁移的指南的文档。

本教程已通过 Node v14.7.0、npmv6.14.7、reactv16.13.1、react-nativev0.63.2、@react-navigation/nativev5.7.3 和@react-navigation/stackv5.9.0 验证。

第 1 步 – 创建一个新的 React Native 应用程序

首先，通过在终端中输入以下命令来创建一个新的 React Native 应用程序：

npx react-native init MySocialNetwork --version 0.63.2

然后，导航到新目录：

cd MySocialNetwork

并启动 iOS 应用程序：

npm run ios

或者，对于 Android：

npm run android

注意：如果您遇到任何问题，您可能需要咨询React Native CLI 的故障排除问题。

这将为您创建一个骨架项目。它现在看起来不像一个社交网络。让我们解决这个问题。

打开App.js：

nano App.js

将的内容替换为App.js以下代码以显示欢迎消息：

应用程序.js

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

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to MySocialNetwork!</Text>
      </View>
    );
  }
}

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

export default App;

保存文件。现在，当您运行应用程序时，欢迎使用 MySocialNetwork！消息将出现在您的模拟器中。

在下一步中，您将向应用程序添加更多屏幕。

第 2 步 – 创建一个`HomeScreen`和`FriendsScreen`

目前，您只有一个显示欢迎消息的屏幕。在这一步中，您将为您的应用程序创建两个屏幕：HomeScreen和FriendsScreen。

`HomeScreen`

您的应用程序将需要一个HomeScreen. 在HomeScreen将你的网络中已经显示了好友的号码。

从中获取代码App.js并将其添加到名为的新文件中HomeScreen.js：

cp App.js HomeScreen.js

打开HomeScreen.js:

nano HomeScreen.js

修改HomeScreen.js为使用HomeScreen而不是App：

主屏幕.js

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

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>
      </View>
    );
  }
}

// ...

export default HomeScreen;

此代码将生成一个You have (undefined) 朋友。占位符消息。稍后您将提供一个值。

`FriendsScreen`

您的应用程序还需要一个FriendsScreen. 在上，FriendsScreen您将能够添加新朋友。

从中获取代码App.js并将其添加到名为的新文件中FriendsScreen.js：

cp App.js FriendsScreen.js

打开FriendsScreen.js:

nano FriendsScreen.js

修改FriendsScreen.js为使用FriendsScreen而不是App：

FriendsScreen.js

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

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>
      </View>
    );
  }
}

// ...

export default FriendsScreen;

此代码将在此处生成添加朋友！信息。

此时，您有一个HomeScreen和FriendsScreen。但是，无法在它们之间导航。您将在下一步中构建此功能。

第 3 步 –`StackNavigator`与 React Navigation 一起使用

要在屏幕之间导航，您将使用StackNavigator. A 的StackNavigator工作方式与调用堆栈完全相同。您导航到的每个屏幕都被推到堆栈的顶部。每次点击后退按钮时，屏幕都会从堆栈顶部弹出。

首先，安装@react-navigation/native：

npm install @react-navigation/native@5.7.3

然后，安装@react-navigation/stack及其对等依赖项：

npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

注意：如果您正在为 iOS 开发，您可能需要导航到该ios目录并运行pod install.

接下来，回顾App.js：

nano App.js

添加NavigationContainer和createStackNavigator到App.js：

应用程序.js

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

然后，替换以下内容render：

应用程序.js

// ...

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

嵌套在里面<Stack.Navigator>，添加HomeScreen：

应用程序.js

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

此代码为您的导航器创建了一个非常小的堆栈，只有一个屏幕：HomeScreen。

嵌套在里面<Stack.Navigator>，添加FriendsScreen：

应用程序.js

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import FriendsScreen from './FriendsScreen';

const Stack = createStackNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen
            name="Friends"
            component={FriendsScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

此代码将添加FriendsScreen到导航器。

注意：这与createStackNavigator之前版本的 React Navigation 中的使用方式不同。

现在，导航器知道您的两个屏幕。

向`HomeScreen`和添加按钮`FriendsScreen`

最后，添加按钮以带您在两个屏幕之间切换。

在中HomeScreen.js，添加以下代码：

主屏幕.js

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

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}

// ...

在中FriendsScreen.js，添加以下代码：

FriendsScreen.js

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

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

// ...

让我们来谈谈this.props.navigation。只要您的屏幕包含在中StackNavigator，它就会自动从navigation对象继承许多有用的道具。在这种情况下，您曾经navigate移动到不同的页面。

主屏幕和好友屏幕

如果您现在打开模拟器，您可以在HomeScreen和之间导航FriendsScreen。

第 4 步 –`Context`用于将数据传递到其他屏幕

在此步骤中，您将创建可能的朋友阵列- Alice，Bob和Sammy-和现在的朋友一个空数组。您还将为用户创建将可能的朋友添加到他们当前朋友的功能。

打开App.js:

nano App.js

添加possibleFriends和currentFriends到组件的状态：

应用程序.js

// ...

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      possibleFriends: [
        'Alice',
        'Bob',
        'Sammy',
      ],
      currentFriends: [],
    }
  }

  // ...
}

// ...

接下来，添加一个函数将一个可能的朋友移动到当前朋友列表中：

应用程序.js

// ...

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      possibleFriends: [
        'Alice',
        'Bob',
        'Sammy',
      ],
      currentFriends: [],
    }
  }

  addFriend = (index) => {
    const {
      currentFriends,
      possibleFriends,
    } = this.state

    // Pull friend out of possibleFriends
    const addedFriend = possibleFriends.splice(index, 1)

    // And put friend in currentFriends
    currentFriends.push(addedFriend)

    // Finally, update the app state
    this.setState({
      currentFriends,
      possibleFriends,
    })
  }

  // ...
}

// ...

至此，您已经完成了添加朋友的功能。

添加`FriendsContext`到`App`

现在您可以在中添加朋友App.js，但您需要将他们添加到中FriendsScreen.js并让他们显示在中HomeScreen.js。由于这个项目是用 React 构建的，你可以将此功能注入带有上下文的屏幕。

注意：在以前版本的 React Navigation 中，可以用于screenProps在屏幕之间共享数据。在当前版本的 React Navigation 中，推荐使用React Context在屏幕之间共享数据。

为了避免循环引用，您需要一个新FriendsContext文件：

nano FriendsContext.js

出口FriendsContext：

好友上下文

import React from 'react';

export const FriendsContext = React.createContext();

打开App.js:

nano App.js

添加FriendsContext：

应用程序.js

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { FriendsContext } from './FriendsContext';
import Home from './Home';
import Friends from './Friends';

const Stack = createStackNavigator();

class App extends React.Component {
  // ...

  render() {
    return (
      <FriendsContext.Provider>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={Home}
            />
            <Stack.Screen
              name="Friends"
              component={Friends}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </FriendsContext.Provider>
    );
  }
}

// ...

此代码建立FriendsContext为一个新Context对象并将其包装NavigationContainer在一个Context.Provider组件中，以便组件树中的任何子项都可以订阅上下文更改。

由于您不再使用View或Text，因此可以从中删除这些导入react-native。

您将需要提供一个value使消费者可以访问数据：

应用程序.js

// ...

class App extends React.Component {
  // ...

  render() {
    return (
      <FriendsContext.Provider
        value={
          {
            currentFriends: this.state.currentFriends,
            possibleFriends: this.state.possibleFriends,
            addFriend: this.addFriend
          }
        }
      >
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={Home}
            />
            <Stack.Screen
              name="Friends"
              component={Friends}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </FriendsContext.Provider>
    );
  }
}

// ...

这将允许HomeScreen和FriendsScreen将任何上下文更改引用到currentFriends和possibleFriends。

现在，您可以在屏幕中引用上下文。

添加`FriendsContext`到`HomeScreen`

在此步骤中，您将设置应用程序以显示当前好友数量。

打开HomeScreen.js:

nano HomeScreen.js

并添加FriendsContext：

主屏幕.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class HomeScreen extends React.Component {
  // ...
}
HomeScreen.contextType = FriendsContext;

// ...

此代码建立了一个Class.contextType. 您现在可以访问屏幕中的上下文。

例如，让我们HomeScreen显示currentFriends您拥有的数量：

主屏幕.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have { this.context.currentFriends.length } friends!</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}
HomeScreen.contextType = FriendsContext;

// ...

如果您在模拟器中再次打开您的应用程序并查看HomeScreen，您将看到消息：您有 0 个朋友！.

添加`FriendsContext`到`FriendsScreen`

在此步骤中，您将设置应用程序以显示可能的朋友并提供将他们添加到当前朋友的按钮。

接下来，打开FriendsScreen.js：

nano FriendsScreen.js

并添加FriendsContext：

FriendsScreen.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class FriendsScreen extends React.Component {
  // ...
}
FriendsScreen.contextType = FriendsContext;

// ...

此代码建立了一个Class.contextType.

现在，创建一个按钮来添加朋友FriendsScreen.js：

FriendsScreen.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class Friends extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        {
          this.context.possibleFriends.map((friend, index) => (
            <Button
              key={ friend }
              title={ `Add ${ friend }` }
              onPress={() =>
                this.context.addFriend(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}
FriendsScreen.contextType = FriendsContext;

// ...

如果您在模拟器中再次打开您的应用程序并查看FriendsScreen，您将看到要添加的朋友列表。

HomeScreen 有 0 个 currentFriends 和 FriendScreen 有 3 个可能的Friends

如果您访问FriendsScreen并单击按钮添加朋友，您将看到possibleFriends减少的列表。如果您访问HomeScreen，您会看到朋友数量增加。

您现在可以在屏幕之间导航并在它们之间共享数据。

结论

在本教程中，您创建了一个具有多个屏幕的示例 React Native 应用程序。使用 React Navigation，您设计了一种在屏幕之间导航的方法。使用 React Context，您开发了一种在屏幕之间共享数据的方法。

本教程的完整源代码可在 GitHub 上找到。

如果您想更深入地了解 React Navigation，请查看他们的文档。

React Navigation 不是唯一的路由和导航解决方案。还有React Native Navigation、React Native Router Flux和React Router Native。

如果您想了解有关 React 的更多信息，请查看我们的How To Code in React.js系列，或查看我们的 React 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧！