Как проверить состояние приложения в React Native?

Опубликовано: 11 Августа, 2022

React Native — это программная среда пользовательского интерфейса с открытым исходным кодом, созданная Meta Platforms, Inc. Она используется для разработки приложений для Android, Android TV, iOS, macOS, tvOS, Интернета, Windows и UWP, позволяя разработчикам использовать платформу React вместе с со встроенными возможностями платформы.

В этой статье мы узнаем, как мы можем проверить состояние приложения в React Native.

Создание приложения React Native:

Шаг 1: Мы будем использовать expo для создания нативного приложения для реагирования. Установите expo-cli, используя приведенную ниже команду в терминале.

npm install -g expo-cli

Шаг 2: Создайте нативный проект с помощью expo.

expo init "gfg"

Шаг 3: Теперь перейдите к созданному проекту, используя приведенную ниже команду.

cd "gfg"

Структура проекта: Это будет выглядеть следующим образом:

Проверка состояния приложения: модуль AppState можно использовать для определения текущего состояния приложения, независимо от того, находится ли оно на переднем плане или в фоновом режиме. Он также может уведомлять вас об изменении состояния. Для этого добавьте приведенный ниже код в файл App.js.

Javascript

import React, { useRef, useState, useEffect } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";
  
const GfGApp = () => {
  const currentState = useRef(AppState.currentState);
  const [state, setState] = useState(currentState.current);
  
  useEffect(() => {
    const handleChange = AppState.addEventListener("change", changedState => {
  
      currentState.current = changedState;
      setState(currentState.current);
    });
  
    return () => {
      handleChange.remove();
    };
  }, []);
  
  return (
    <View style={styles.container}>
      <Text>GeeksforGeeks React Native App State</Text>
      <Text>App is in {state} mode</Text>
    </View>
  );
};
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});
  
export default GfGApp;

Запустите приложение: теперь запустите приложение, используя приведенную ниже команду в терминале.

npm run web

Выход:

JavaScript

Как проверить состояние приложения в React Native?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ