如何向Drawer Navigator组件传参？实现组件复用与内容动态切换

你当前的写法存在核心问题：直接将Pagef('Home')这类执行结果赋值给component属性，这相当于把函数返回的JSX元素传给了Drawer.Screen，但component要求接收的是组件类型而非已渲染的元素，这会导致组件无法正常响应路由生命周期，也达不到复用函数的预期。

以下是两种可行的优化方案：

方案一：利用React Navigation路由参数（推荐） #

贴合框架设计规范，复用性更强，还支持后续跳转传参：

function Pagef({ route }) {
  // 从路由参数中获取传入的值
  const { param1 } = route.params;
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Text>{param1}</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator useLegacyImplementation initialRouteName="Feed">
      <Drawer.Screen
        name="Feed"
        component={Pagef}
        // 通过initialParams传递参数
        initialParams={{ param1: 'Home' }}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Pagef}
        initialParams={{ param1: 'Updates' }}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="Profile"
        component={Pagef}
        initialParams={{ param1: 'Profile' }}
        options={{ drawerLabel: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

方案二：用匿名组件包裹（适合简单场景） #

如果不想修改Pagef的参数结构，可以用包裹组件的方式传递参数：

function Pagef(param1) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Text>{param1}</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  // 提前定义包裹后的组件，避免每次渲染创建新实例
  const HomePage = () => Pagef('Home');
  const UpdatesPage = () => Pagef('Updates');
  const ProfilePage = () => Pagef('Profile');

  return (
    <Drawer.Navigator useLegacyImplementation initialRouteName="Feed">
      <Drawer.Screen
        name="Feed"
        component={HomePage}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={UpdatesPage}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="Profile"
        component={ProfilePage}
        options={{ drawerLabel: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

方案对比 #

方案一更推荐，它遵循React Navigation的设计逻辑，参数传递更规范，且支持后续从其他页面跳转到该组件时动态传参；方案二更适合快速适配现有函数结构，但灵活性不如前者。

内容的提问来源于stack exchange，提问作者Mithila Karunarathna