Question

我有一个组件位于Drawer标签之外，但位于NavigationContainer内部。因此，我从react使用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()) 但无法获取抽屉状态。

我尝试了很多方法，但是没有用。

谢谢。

Answer 1

您可以通过获取导航状态来检查抽屉是否打开：

DatabaseReference ref = FirebaseDatabase.getInstance().getReference("Earthquakes");
Query query = ref.orderByChild("timestamp").startAt("2020-11-03 18:12:00").endAt("2020-11-03 18:12:59").
query.addListenerForSingleValueEvent(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot dataSnapshot) {
        for (DataSnapshot quakeSnapshot: dataSnapshot.getChildren()) {
            Log.i("DB", quakeSnapshot.getKey());
            Log.i("DB", quakeSnapshot.child("eventType").getValue(String.class));
        }
    }

    @Override
    public void onCancelled(DatabaseError databaseError) {
        throw databaseError.toException();
    }
}

以上代码假定抽屉位于根目录。如果它是嵌套的，则需要遍历状态以使用const state = navigationRef.current.getRootState(); const isDrawerOpen = state.history.some((it) => it.type === 'drawer');查找状态对象。

不清楚您为什么需要从问题中进行检查。通常，您不需要检查它。如果在抽屉已经打开的情况下调度type: 'drawer'，则不会发生任何事情。因此检查是不必要的。如果您想在抽屉打开时将其关闭，则可以派遣DrawerActions.openDrawer()。

Answer 2

您可以创建一个帮助器类，例如：

class DrawerHandler() {
 
 openDrawer() {
     this.drawerOpened = true;  
 }

closeDrawer() {
     this.drawerOpened = false;    
 }

getDrawerStatus() {
  return this.drawerOpened;
 }
}

export default new DrawerHandler();

在打开和关闭抽屉时使用打开和关闭功能，并获取功能以获取抽屉的状态

反应本机导航：检查抽屉是否打开

2 个答案: