如何从另一个组件访问"DrawerCustom.Navigator“组件的导航属性

Question

我是react native的新手，我正在尝试构建一个应用程序，其中工具栏位于抽屉上方，工具栏上有一个允许打开抽屉的按钮，如下图所示：

​

正如您所看到的，im试图实现的是始终使工具栏可见，即使在抽屉打开时也是如此。我已经设法完成了这一点，问题是由于工具栏在"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”加载当前屏幕的函数，如果名称是profile，则makeLayout函数将加载配置文件屏幕。

Answer 1

您应该在ToolbarLogged组件中使用'useNavigation‘钩子，它将使您能够访问导航。只要组件在NavigationContainer中，这就会起作用。

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

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

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

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

您可以查看reference了解更多详细信息