反应导航：抽屉导航器出现在背景中

Question

我正在使用来自React Navigation的DrawerNavigator。我注意到有时我可以看到Drawer Navigator在某些“视图”后面打开，例如，在我打开相机或询问用户权限之前。

下面是我的DrawerNavigator的简化示例（代码）。我想知道如何在背景中隐藏DrawerNavigator。

import { createAppContainer, createDrawerNavigator } from "react-navigation";


import FAQ from "./FAQ";
import Home from "./Home";


const MainNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home
    },

    FAQ: {
      screen: FAQ
    }
  }
);

const App = createAppContainer(MainNavigator);
export default App;

示例图像。

Answer 1

你可以在开始之前手动关闭它。

To open and close drawer, use the following helpers to open and close the drawer:

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

Answer 2

您可以使用以下代码关闭抽屉，

从“react-navigation”导入DrawerActions

import { DrawerActions } from "react-navigation";
.....

this.props.navigation.dispatch(DrawerActions.closeDrawer());

Answer 3

错误结果与此行this.setState({ appState: nextAppState });有关。这设置了应用状态，即应用是焦点还是后台。删除此行似乎解决了我的DrawerNavigator问题。

  componentDidMount = async () => {
    AppState.addEventListener("change", this.appInFocus);
    this.setState({
      appState: AppState.currentState
    });
  };

  componentWillUnmount = () => {
    AppState.removeEventListener("change", this.appInFocus);
  };

  appInFocus = async (nextAppState: PossibleAppStates) => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
       console.log("HELLo")
    }
    this.setState({ appState: nextAppState });
  };
}