React Navigation：后台显示的Drawer Navigator

Question

我正在使用DrawerNavigator，来自React Navigation。我注意到有时我可以在某些“视图”后面看到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

useNativeAnimations：否，为我工作！

Answer 2

您可以在开始任何操作之前手动将其关闭。

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

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

Answer 3

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

从“反应导航”中导入DrawerActions

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

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

Answer 4

原来，该错误与该行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 });
  };
}