将 props 发送到 @react-navigation/drawer 组件

Question

I am trying to send prop to component inside Drawer.Screen. I am using @react-navigation/drawer. I finally send props to navigation container but I cant send props to component={homeStackScreen} in Drawer.Screen.How can I send props to homeStackScreen class. And it is not written in documentation. need help please.

const Drawer = createDrawerNavigator();

<NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                {props.leftMenu.map((x,index) =>                 
                <Drawer.Screen name={x.name} key = {index} component={homeStackScreen} />
                )}
            </Drawer.Navigator>
</NavigationContainer>

Answer 1

Im using this aproche to pass "font" prop:

in App.js

 <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        initialParams={{ font: TajawalFontFamily }}
      />
    </Drawer.Navigator>
  </NavigationContainer>

In HomeScreen.js

export default function HomeScreen({ route }) {
const font = route.params.font;
...

Answer 2

Here is how you can pass the props to the components from Drawer.Screen easily by replacing the simple component from component={} and replacing it with an anonymous function which will return our component where we need to navigate.

Usually, we declare a screen like this:

<Drawer.Screen name="Home" component={HomeScreen}/>

to pass the props to the component, we will just make the following modification with the help of the anonymous function and pass the props.

Like this:

<Drawer.Screen name="Home" component={() => <HomeScreen data={"your_data"}/>}/>

Simple Example:

    return (
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={() => <HomeScreen data={"your_data"}/>}/>
                <Drawer.Screen name="Notifications" component={NotificationsScreen} />
            </Drawer.Navigator>
        </NavigationContainer>
    );

}}

//.............

function HomeScreen({data}) {
    return (
            <View>
            <Text>{data}</Text>
            </View>
    );
}

In your case, it should look something like code given below:

const Drawer = createDrawerNavigator();

<NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                {props.leftMenu.map((x,index) =>                 
                <Drawer.Screen name={x.name} key = {index} component={() => <homeStackScreen data={x}/>} />
                )}
            </Drawer.Navigator>
</NavigationContainer>

Similar question for more: Passing state array from class into function with pure react native

Answer 3

There is a props named initialParams in Drawer.Screen given in the docs of React navigation 5.x to pass a props to component. If you navigate to a new screen, the params passed are shallow merged with the initial params.

Check here: https://reactnavigation.org/docs/5.x/screen#initialparams

Use it like this:

<Drawer.Screen name="Home" component={HomeScreen} initialParams={{data:"your props"}}/>

Answer 4

The accepted answer is correct, but it will result in this warning: Passing an inline function will cause the component state to be lost on re-render. This would be a better way of passing props to the component:

<Drawer.Screen
    name={'Home'}
>
    {(props) => (
        <HomeScreen
            yourProps={"yourProps"}
        />
    )}
</Drawer.Screen>