主页 / coding / 问题 / 77119419
Accepted
Rein S
Asked: 2023-09-17 04:05:04 +0800 CST

从同级组件访问 DrawerStatus

  • 772

我的主应用程序包含一个包含其 组件的NavigationContainera 。Drawer.NavigatorDrawer.Screen

在 之外Navigator，我有一个浮动操作按钮组件NavigationContainer，我想根据导航抽屉是否打开来有条件地渲染。

const Drawer = createDrawerNavigator()

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

由于我无法在组件useDrawerStatus内使用FloatingActionButton，因为该组件不是Drawer.Navigator（它不能容纳按钮本身，因为Navigator只能包含Screen、Group和Fragment组件）的子组件，因此我如何侦听抽屉状态或以其他方式访问其当前打开状态？

react-native

1 个回答

  1. Best Answer

    使用screenListeners属性来监听state事件并检查是否drawer存在。像这样的东西：

    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

相关问题