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

Question

我正在尝试将 prop 发送到 Drawer.Screen 内的组件。我正在使用@react-navigation/drawer。我终于将道具发送到导航容器，但无法将道具发送到 Drawer.Screen 中的 component={homeStackScreen}。如何将道具发送到 homeStackScreen 类。而且它没有写在文档中。请需要帮助。

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

我使用这个 aproche 来传递“font”属性：

在 App.js 中

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

在 HomeScreen.js 中

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

Answer 2

Drawer.Screen以下是如何通过替换简单组件并将其替换为匿名函数来轻松地将 props 传递给组件component={}，该匿名函数将返回我们需要导航的组件。

通常，我们声明一个屏幕是这样的：

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

要将 props 传递给组件，我们只需借助匿名函数进行以下修改并传递 props。

像这样：

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

简单示例：

    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>
    );
}

在您的情况下，它应该类似于下面给出的代码：

    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>
    );
}

更多类似问题：Passing state array from class into function with pure React Native