时间戳

首页 > 解决方案 > 如何从另一个组件访问“DrawerCustom.Navigator”组件的导航道具

javascript - 如何从另一个组件访问“DrawerCustom.Navigator”组件的导航道具

问题描述

我是本机反应的新手，我正在尝试构建一个应用程序，其中工具栏位于抽屉上方，并且工具栏有一个允许打开抽屉的按钮，如图所示： 在此处输入图像描述

正如您所看到的，我试图实现的是始终使工具栏可见，即使在抽屉打开时也是如此。我已经设法实现了，问题是由于工具栏位于“DrawerCustom.Navigator”组件之外，我无法访问工具栏组件内的道具导航，每次单击按钮时我都需要打开抽屉（带有 3 个黑条的按钮）。这是我放置工具栏和抽屉组件的方式：

<NavigationContainer>
          <View style={{...styles.default,...styles.marginTopPhone}}> 
            <ToolbarLogged toggleDrawer={()=>{navigation.toggleDrawer()}}
                idLang={(stringLang==strings_pt)?1:2} lang={stringLang}/>
            <DrawerCustom.Navigator ref={DrawerRef} drawerContent={props => <DrawerContent langFile={stringLang} lang={(stringLang==strings_pt)? 1 : 0}  {...{...props}}/>}>
                <DrawerCustom.Screen name='Dashboard' component={makeLayout} initialParams={{ name: stringLang.dashboard}}/>
                <DrawerCustom.Screen name='Condominium' component={makeLayout} initialParams={{ name: stringLang.condominium}}/>
                <DrawerCustom.Screen name='Profile' component={makeLayout} initialParams={{ name: stringLang.profile}}/>
                <DrawerCustom.Screen name='Signout' component={Signout} />
            </DrawerCustom.Navigator>
          </View>
</NavigationContainer>

每个屏幕都有的 makeLayout 组件是一个根据参数“名称”加载当前屏幕的函数，如果名称是配置文件，那么 makeLayout 函数将加载配置文件屏幕。

标签： javascriptreactjsreact-native

解决方案

您应该使用 ToolbarLogged 组件中的“useNavigation”挂钩，它可以让您访问导航。只要组件在 NavigationContainer 内，这将起作用。

下面是一个按钮的示例，您也可以对您的组件执行相同的操作

import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.toggleDrawer();
      }}
    />
  );
}

您可以查看参考以获取更多详细信息

推荐阅读