React Navigation: Drawer Navigator отображается в фоновом режиме

Я использую ЯщикНавигатор из 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;

Пример изображения.

React Navigation: Drawer Navigator отображается в фоновом режиме

react-native react-navigation expo

28.04.2019 21:49

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

764

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете закрыть его вручную, прежде чем начинать что-либо.

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

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

29.04.2019 02:56

Вы можете использовать следующий код, чтобы закрыть ящик,

Импортируйте DrawerActions из "реагировать-навигация"

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

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

29.04.2019 05:46

Ответ принят как подходящий

Ошибка оказалась связана с этой строкой 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.info("HELLo")
    }
    this.setState({ appState: nextAppState });
  };
}

30.04.2019 00:14

useNativeAnimations: false, у меня работает!

02.03.2020 18:29