React Native Navigation:检查抽屉是否打开
React Native Navigation: Check if drawer is opened or not
我有一个组件位于 Drawer 标签之外,但它位于 NavigationContainer 内。
所以我使用 useRef
从反应中获取 navigate
方法。
所以我用这个例子:Navigating without navigation prop
但是现在,我无法获取抽屉的状态(是打开还是关闭)。
这是我的 App 组件:
import 'react-native-gesture-handler';
import React from 'react';
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import GetInformationByLocation from "./reducers/GetInformationByLocation";
import Wrapper from './components/Wrapper';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import GeoDisplay from "./components/GeoDisplay";
import { Text } from "react-native";
import { navigationRef } from "./helpers/Navigator";
const store = createStore(GetInformationByLocation, applyMiddleware(thunk));
/*
* TODO:
* 1. Wrap everything with parent component
* 2. Search bar
* 3. Save searched cities.
* 4. Check if the city is undefined and suggest nearest city.
* 5. Animated background
* 6. Fancy and animated font
* 7. Setup menu преди показване на приложението
*/
const Drawer = createDrawerNavigator();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
<Wrapper />
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={GeoDisplay} />
</Drawer.Navigator>
</NavigationContainer>
</Provider >
);
}
export default App;
和我的 Wrapper.js 组件:
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import { SearchBar, Header } from 'react-native-elements';
import { MainUI } from '../styling/UI';
import * as Navigator from "../helpers/Navigator";
import { DrawerActions } from "@react-navigation/native";
const Wrapper = (props) => {
const [search, setSearch] = useState(true);
const openDrawer = () => {
Navigator.navigationRef.current.dispatch(DrawerActions.openDrawer())
setSearch(false);
}
useEffect(() => {
}, []);
return (
<>
<StatusBar backgroundColor={"#011E25"} />
<Header
leftComponent={{ icon: 'menu', color: '#fff', onPress: () => { openDrawer() } }}
centerComponent={{ text: 'COVID Bulgaria', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
backgroundColor={'#011E25'}
/>
{search &&
<View>
<SearchBar placeholder="Търси град" containerStyle={MainUI.searchContainer} />
</View>
}
</>
)
}
export default Wrapper;
我使用 navigationRef 调度 openDrawer()
操作
Navigator.navigationRef.current.dispatch(DrawerActions.openDrawer())
但无法获取抽屉的状态。
试了很多方法都不行。
提前致谢。
您可以创建一个助手 class,例如:
class DrawerHandler() {
openDrawer() {
this.drawerOpened = true;
}
closeDrawer() {
this.drawerOpened = false;
}
getDrawerStatus() {
return this.drawerOpened;
}
}
export default new DrawerHandler();
在抽屉打开和关闭时使用打开和关闭函数并获取抽屉状态的函数
您可以通过获取导航状态来检查抽屉是否打开:
const state = navigationRef.current.getRootState();
const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
以上代码假定抽屉位于根目录下。如果它是嵌套的,则需要遍历状态以找到具有 type: 'drawer'
.
的状态对象
不清楚为什么要从问题上查。通常你不需要检查它。如果你在抽屉已经打开的情况下调度 DrawerActions.openDrawer()
,什么都不会发生。所以检查是不必要的。如果你想在抽屉打开时关闭抽屉,你可以改为调度 DrawerActions.toggleDrawer()
。
我有一个组件位于 Drawer 标签之外,但它位于 NavigationContainer 内。
所以我使用 useRef
从反应中获取 navigate
方法。
所以我用这个例子:Navigating without navigation prop
但是现在,我无法获取抽屉的状态(是打开还是关闭)。
这是我的 App 组件:
import 'react-native-gesture-handler';
import React from 'react';
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import GetInformationByLocation from "./reducers/GetInformationByLocation";
import Wrapper from './components/Wrapper';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import GeoDisplay from "./components/GeoDisplay";
import { Text } from "react-native";
import { navigationRef } from "./helpers/Navigator";
const store = createStore(GetInformationByLocation, applyMiddleware(thunk));
/*
* TODO:
* 1. Wrap everything with parent component
* 2. Search bar
* 3. Save searched cities.
* 4. Check if the city is undefined and suggest nearest city.
* 5. Animated background
* 6. Fancy and animated font
* 7. Setup menu преди показване на приложението
*/
const Drawer = createDrawerNavigator();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
<Wrapper />
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={GeoDisplay} />
</Drawer.Navigator>
</NavigationContainer>
</Provider >
);
}
export default App;
和我的 Wrapper.js 组件:
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import { SearchBar, Header } from 'react-native-elements';
import { MainUI } from '../styling/UI';
import * as Navigator from "../helpers/Navigator";
import { DrawerActions } from "@react-navigation/native";
const Wrapper = (props) => {
const [search, setSearch] = useState(true);
const openDrawer = () => {
Navigator.navigationRef.current.dispatch(DrawerActions.openDrawer())
setSearch(false);
}
useEffect(() => {
}, []);
return (
<>
<StatusBar backgroundColor={"#011E25"} />
<Header
leftComponent={{ icon: 'menu', color: '#fff', onPress: () => { openDrawer() } }}
centerComponent={{ text: 'COVID Bulgaria', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
backgroundColor={'#011E25'}
/>
{search &&
<View>
<SearchBar placeholder="Търси град" containerStyle={MainUI.searchContainer} />
</View>
}
</>
)
}
export default Wrapper;
我使用 navigationRef 调度 openDrawer()
操作
Navigator.navigationRef.current.dispatch(DrawerActions.openDrawer())
但无法获取抽屉的状态。
试了很多方法都不行。
提前致谢。
您可以创建一个助手 class,例如:
class DrawerHandler() {
openDrawer() {
this.drawerOpened = true;
}
closeDrawer() {
this.drawerOpened = false;
}
getDrawerStatus() {
return this.drawerOpened;
}
}
export default new DrawerHandler();
在抽屉打开和关闭时使用打开和关闭函数并获取抽屉状态的函数
您可以通过获取导航状态来检查抽屉是否打开:
const state = navigationRef.current.getRootState();
const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
以上代码假定抽屉位于根目录下。如果它是嵌套的,则需要遍历状态以找到具有 type: 'drawer'
.
不清楚为什么要从问题上查。通常你不需要检查它。如果你在抽屉已经打开的情况下调度 DrawerActions.openDrawer()
,什么都不会发生。所以检查是不必要的。如果你想在抽屉打开时关闭抽屉,你可以改为调度 DrawerActions.toggleDrawer()
。