React Native 怎么在页面 Push 进去的时候带参数？-JavaScript中文网-JavaScript教程资源分享门户

在 React Native 中，我们经常需要在页面之间进行跳转，常见的方式是使用导航器（Navigator）。但是在实际开发中，我们可能需要在跳转时传递一些参数，比如一个商品的 ID，或者一个用户的信息等等。本文将介绍如何在 React Native 中使用导航器实现页面跳转时带参数的功能。

导航器

在 React Native 中，我们可以使用多种导航器，比如官方推荐的 react-navigation，或者第三方的 react-native-router-flux 等。本文将以 react-navigation 为例进行讲解。

react-navigation 是一个基于 React Native 的导航库，它可以帮助我们实现多种导航场景，比如 Stack（堆栈）、Tab（标签页）等等。在使用 react-navigation 时，我们需要安装它的依赖：

npm install @react-navigation/native

然后安装 Stack Navigator：

npm install @react-navigation/stack

页面跳转

在 react-navigation 中，我们使用 Stack Navigator 来实现页面跳转。在 Stack Navigator 中，我们可以使用 navigate 方法来进行页面跳转：

navigation.navigate('PageName');

其中，'PageName' 是我们要跳转的页面的名称。如果要在跳转时传递参数，我们可以在 navigate 方法中添加一个参数对象：

navigation.navigate('PageName', {param1: value1, param2: value2});

其中，param1、param2 是我们要传递的参数名，value1、value2 是对应的参数值。

页面接收参数

在跳转后的页面中，我们可以使用 navigation.getParam 方法来获取传递过来的参数：

const param1 = navigation.getParam('param1', defaultValue);

其中，'param1' 是我们要获取的参数名，defaultValue 是一个可选的默认值，如果获取不到参数值，则返回默认值。

示例代码

下面是一个简单的示例代码，演示了如何在页面跳转时传递参数，以及在跳转后的页面中获取参数：

// javascriptcn.com 代码示例
import React from 'react';
import {View, Text, Button} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen({navigation}) {
  const onPress = () => {
    navigation.navigate('Detail', {itemId: 1, itemName: '商品1'});
  };

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button title="Go to Detail" onPress={onPress} />
    </View>
  );
}

function DetailScreen({navigation}) {
  const itemId = navigation.getParam('itemId', -1);
  const itemName = navigation.getParam('itemName', '未知商品');

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Detail Screen</Text>
      <Text>商品 ID：{itemId}</Text>
      <Text>商品名称：{itemName}</Text>
    </View>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

export default App;

在这个示例中，我们定义了两个页面：HomeScreen 和 DetailScreen。在 HomeScreen 中，我们定义了一个按钮，点击该按钮会跳转到 DetailScreen，并传递了两个参数：itemId 和 itemName。在 DetailScreen 中，我们使用 navigation.getParam 方法获取这两个参数的值，并展示在页面上。

总结

在 React Native 中，我们可以使用导航器（Navigator）实现页面跳转。在跳转时，我们可以通过传递参数的方式将数据传递到下一个页面，并在下一个页面中使用 navigation.getParam 方法获取这些参数的值。本文介绍了如何使用 react-navigation 实现页面跳转时带参数的功能，并提供了一个简单的示例代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657dded7d2f5e1655d8b237b