向@react-navigation/drawer 组件发送道具

Posted 2023-03-14

【中文标题】向@react-navigation/drawer 组件发送道具

【英文标题】：sending props to @react-navigation/drawer component

【发布时间】：2020-12-11 21:21:56

【问题描述】：

我正在尝试将道具发送到 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>

【参考方案1】：

您可以通过以下方式轻松地将 props 从 Drawer.Screen 传递给组件，方法是替换 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>
    );

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

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>

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

【讨论】：

看起来您正在为屏幕“测试菜单”的“组件”道具传递内联函数（例如，component=() => ）。传递内联函数将导致组件状态在重新渲染时丢失并导致性能问题，因为它在每次渲染时都重新创建。您可以将该函数作为子函数传递给“屏幕”以实现所需的行为。