Início / coding / Perguntas / 77119419
Accepted
Rein S
Asked: 2023-09-17 04:05:04 +0800 CST

Acessando DrawerStatus do componente irmão

  • 772

Meu aplicativo principal contém um NavigationContainerque Drawer.Navigatorabriga seus Drawer.Screencomponentes.

Fora do Navigator, tenho um componente de botão de ação flutuante que NavigationContainergostaria de renderizar condicionalmente com base no fato de a gaveta de navegação estar aberta.

const Drawer = createDrawerNavigator()

export default function App() {
    return (
        <NavigationContainer ...>
          
          <Drawer.Navigator ...>
            <Drawer.Screen ... />
            <Drawer.Screen ... />
            <Drawer.Screen ... />
           
          </Drawer.Navigator>
          
          <FloatingActionButton />
           
        </NavigationContainer>
      )
    }
}

Como não posso usar useDrawerStatusdentro do FloatingActionButtoncomponente porque o componente não é filho de Drawer.Navigator(que não pode abrigar o botão em si, porque Navigatorsó pode conter componentes Screen, Groupe Fragment), como posso ouvir o status da gaveta ou acessar seu estado aberto atual?

react-native

1 respostas

  1. Best Answer

    Use a propriedade screenListeners para ouvir o stateevento e verificar se drawerestá presente. Algo assim:

    export default function App() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false)

  return (
    <NavigationContainer>
      <Drawer.Navigator 
        screenListeners={{
          state: (e) => {
            setIsDrawerOpen(e.data.state.history.some((it) => it.type === 'drawer'))
          }
        }}>
...
      </Drawer.Navigator>
      {!isDrawerOpen && <FloatingActionButton/>}
    </NavigationContainer>
  )
}
    • 1

relate perguntas