react-native navigation.navigate 传递参数以及后面页面获取传递的参数

在 React Native 中使用 `navigation.navigate` 传递参数需要在第二个参数中以对象的形式进行传递。例如：

navigation.navigate('SecondScreen', { foo: 'bar' })

这里我们传递了一个名为 `foo` 的参数，值为 `'bar'`。

在接收参数的页面（即 `SecondScreen`）中，可以使用 `route.params` 来获取传递的参数。例如：

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

function SecondScreen({ route }) {
  const { foo } = route.params;

  return (
    <View>
      <Text>{foo}</Text>
    </View>
  );
}

export default SecondScreen;

这里我们使用了 `route.params` 来获取传递的参数，并将它渲染到页面上。

相关问题

react-native 路由拦截

在 React Native 中，可以使用第三方库来实现路由拦截。一个常用的库是 React Navigation，它提供了强大的导航和路由管理功能。

要实现路由拦截，可以使用 React Navigation 提供的导航守卫功能。导航守卫可以在路由变化前或后执行自定义的逻辑。

以下是一个简单的示例，演示如何在 React Native 中使用 React Navigation 实现路由拦截：

1. 首先，确保已经安装了 React Navigation：

npm install @react-navigation/native

2. 安装所需的导航器（例如 Stack Navigator）：

npm install @react-navigation/stack

3. 创建一个名为 `NavigationService.js` 的新文件，用于导航拦截逻辑：

import { NavigationActions } from '@react-navigation/compat';

let navigator;

function setTopLevelNavigator(navigatorRef) {
  navigator = navigatorRef;
}

function navigate(routeName, params) {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// 添加其他需要的导航方法

export default {
  navigate,
  setTopLevelNavigator,
};

4. 在根组件中设置导航器并引用 `NavigationService.js`：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import NavigationService from './NavigationService';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer ref={navigatorRef => {
      NavigationService.setTopLevelNavigator(navigatorRef);
    }}>
      <Stack.Navigator>
        {/* 添加其他屏幕 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

5. 在需要拦截的组件中使用 `NavigationService.js`：

import NavigationService from './NavigationService';

// 在需要拦截的地方调用 `NavigationService.navigate` 方法
NavigationService.navigate('ScreenName');

通过这种方式，你可以在路由变化前后执行自定义的逻辑，例如验证用户权限、处理特定的跳转逻辑等。需要注意的是，这只是一个简单的示例，你可以根据具体的需求进行定制和扩展。

navigation.navigate()

navigation.navigate() 是 React Navigation 库中的一个函数，用于在 React Native 应用程序中进行页面导航。它用于在不同的屏幕之间进行切换并传递参数。通过调用 navigation.navigate('ScreenName')，你可以导航到指定的屏幕，其中 'ScreenName' 是你要导航到的屏幕的名称。你还可以通过传递参数对象作为第二个参数来向目标屏幕传递参数。这样，你就可以在不同的屏幕之间进行交互和共享数据。