React Navigation 是一个 JavaScript 库,可让您在 React Native 应用程序中实现屏幕导航功能。它已成为配置简单和复杂 React Native 移动应用程序的常规方法。

使用 React Navigation,应用程序中的每个屏幕组件都会自动获得对路线和导航道具的访问权限。 route prop 包含有关组件层次结构中当前路由的信息。导航道具处理将导航操作分派到其他屏幕组件。

本文将介绍 React Navigation 库的 route 和 navigation prop,它的元素,以及在导航不同的应用程序屏幕时如何使用 navigation prop 中包含的.navigate函数来传递参数(params)。

先决条件

本文假设您具备 React Native 的基本知识以及如何使用 React Navigation 库正确设置堆栈导航器。

您可以通过访问他们的官方文档来复习这两个主题:

• React Native 基础知识

• 设置堆栈导航器

传递参数

导航.navigate()

React Navigation 堆栈导航器提供的导航道具是一个对象,其中包含用于调度特定操作的各种功能。其中之一是.navigate函数,它用于导航并将参数数据连续传递到应用程序中的其他屏幕。

尽管导航道具是自动提供的,但您需要在堆栈导航器中定义的每个屏幕组件上将其作为参数接收以访问其功能。然后,通过简单地调用它,navigation.navigate( )您可以传入一个屏幕路径名称以导航到和一个参数对象携带到该路径。

import { Button, View } from "react-native";
import React from "react";

const HomeScreen = (props) => {
  return (
    <View>
      <Button
        title="Button"
        onPress={() => props.navigation.navigate("ScreenRouteName", {params})}
      />
    </View>
  );
};

export default HomeScreen;

进入全屏模式 退出全屏模式

使用 2015 ES6 Javascript 语法,您可以解构 props 对象以仅获取导航道具。因为这是这里唯一需要的道具对象。

//Your code will then look like this 
const HomeScreen = ({navigation}) => {
        console.log(navigation);
    ...
    onPress={() => navigation.navigate("ScreenRouteName", {params})}
    ...
};

进入全屏模式 退出全屏模式

如果您控制台console.log(navigation),您可以看到导航道具对象中可用的所有底层功能。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Iays6v87--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/vdvt3t1fc91khc0z3rlo.jpg)

导航道具仅提供给在 React Native 应用程序的堆栈导航器包装内定义的组件。这意味着您创建的任何子组件或嵌套组件都无法访问导航道具。那么,当子组件需要导航功能时,你会怎么做呢?

您可以将 React Navigation 6.0 版提供的useNavigation钩子导入到这样的子组件中,并将其分配给常量。然后使用.navigate( )在 onPress 道具中调用该常量

在这里,常数被命名为navigation,因为这很有意义并且可以避免混淆。

import { View, Button } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

const NavigationButton = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Button
        title ="Button" 
        onPress={() => navigation.navigate("screenRouteName", {params})} 
      />
    </View>
  );
};

export default NavigationButton;

进入全屏模式 退出全屏模式

接收参数

传递参数后,关联的组件屏幕将准备好接收它。如前所述,堆栈导航器中自动提供给每个屏幕的路由参数包含有关当前组件屏幕的一些信息。它包含一个 params 对象,该对象提供对提供给组件的所有参数的访问。

因此,要读取可用的参数,您需要做的就是接收此路由道具作为组件参数。

//HomeScreen
import { View, Text } from "react-native";
import React from "react";

const HomeScreen = ({route}) => {

//ES6 object destructuring
const {Param Name}= route.params;

  return (
    <View>
      <Text>{Param Name}</Text>
    </View>
  );
};

export default HomeScreen;

进入全屏模式 退出全屏模式

记住作为参数传递的数据类型很重要。它应该只是配置将在屏幕上呈现的内容的数据。例如,在用户身份验证流程中,理想情况下,用户 ID 将作为参数传递,以决定您的应用程序将显示哪个用户的数据。

导航.setParams()

嵌套在导航道具对象中的另一个函数是setParams函数。如果您需要更新屏幕的接收参数,这将很有帮助。就像您将使用useState挂钩更新组件状态一样,setParams函数浅层将传递的参数与当前参数合并以返回新结果。

//HomeScreen
import { View, Button } from "react-native";
import React from "react";

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="SecondScreen"
        onPress={() => navigation.navigate("SecondScreen", {text: "hello"})}
      />
    </View>
  );
};

export default HomeScreen;

//SecondScreen
import { Text, View, Button } from "react-native";
import React from "react";

const SecondScreen = ({ route, navigation }) => {
  const {text} = route.params;
  return (
    <View>
      <Text style={{ fontSize: 30 }}>{text} World!</Text>
      <Button
        title="change text"
    //Calling setParams
        onPress={() => navigation.setParams({text: "hey"})}
      />
    </View>
  );
};

export default SecondScreen;

进入全屏模式 退出全屏模式

通过调用navigation.setParams( ),您可以更改收到的text参数:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--azexQOUe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/c0dgdqtrrtcurzlgithg.gif)

结论

在这篇文章中,您了解了 React Navigation 库为屏幕组件提供的路由和导航道具。您还学习了如何使用导航道具将参数传递到路线屏幕,以及如何进入路线道具以读取当前路线屏幕的参数数据。最后,您学习了如何使用 set params 函数更改组件中当前传递的参数。

这篇文章到此结束!