Pass parameter values to drawer Navigator component-CodePudding

Cannot pass parameter to functions or const via Drawer Screen component. Is there any better way to achieve this. the idea is to use single function which change the content accordingly.

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() {
  return (
    <Drawer.Navigator useLegacyImplementation initialRouteName="Feed">
      <Drawer.Screen
        name="Feed"
        component={Pagef('Home')}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Pagef('Updates')}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="Profile"
        component={Pagef('Profile')}
        options={{ drawerLabel: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

CodePudding user response：

Use initialParams to pass route params to component.

<Drawer.Screen name="Feed" component={Pagef} initialParams={{ param1: "Home" }}/>

...

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