React Navigation 中将属性传递给 Drawer 组件：如何解决？

在 React Navigation 中将属性传递给 Drawer 组件

在使用 React Navigation 构建移动应用程序时，你可能会遇到需要将属性传递给 Drawer 组件的情况。然而，与其他导航库不同，Drawer 组件并不直接支持此功能。

问题：Drawer 组件的独特实现

Drawer 屏幕有一个独特的实现，它利用了一个内部导航堆栈。这使得将属性传递给 Drawer 屏幕内的组件变得具有挑战性。

解决方案：使用 NavigationContainer

要解决这个问题，我们可以将 Drawer 导航器嵌套在 NavigationContainer 中。这将允许我们通过 useNavigation() 钩子访问导航属性。

import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  const props = {
    // 你的属性
  };

  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen>
          {(props) => <HomeStackScreen {...props} {...props} />}
        </Drawer.Screen>
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

在上面的示例中，我们首先将 Drawer 导航器嵌套在 NavigationContainer 中。然后，在 Drawer.Screen 中，我们将属性作为 children 组件的属性传递。这将允许我们访问导航属性，例如当前屏幕名称和导航参数。

注意：

• 确保 NavigationContainer 作为应用程序的根组件。
• 在 Drawer.Screen 中，我们应该将属性传递给组件函数，而不是直接传递给组件本身。
• 此解决方案适用于版本 6 及更高版本的 @react-navigation/drawer。

常见问题解答

1. 为什么 Drawer 组件不直接支持将属性传递给它的子组件？

这是由于 Drawer 屏幕的独特实现，它涉及使用内部导航堆栈。

2. 是否有其他方法可以将属性传递给 Drawer 组件？

嵌套 Drawer 导航器是目前将属性传递给 Drawer 组件的唯一方法。

3. 除了 NavigationContainer，是否还有其他方法可以访问导航属性？

否，NavigationContainer 是访问导航属性的唯一方法。

4. 如何使用 useNavigation() 钩子访问导航属性？

你可以使用 useNavigation() 钩子从组件函数中访问导航属性。

5. 此解决方案是否适用于所有版本的 @react-navigation/drawer？

否，此解决方案仅适用于版本 6 及更高版本的 @react-navigation/drawer。