在 react-native 的应用程序中处于睡眠模式或不活动状态后，模态不会打开

Posted 2023-02-16

【中文标题】在 react-native 的应用程序中处于睡眠模式或不活动状态后，模态不会打开

【英文标题】：Modal not opens after sleep mode or inactivity in the app in react-native

【发布时间】：2020-08-13 03:04:33

【问题描述】：

我正在使用 Modal 在我的应用中打开条款。在这里，我可以毫无问题地打开和关闭模式。

但是，如果我打开模式一次，然后在应用程序内不执行任何操作，它就会进入睡眠模式。然后在手机上，它会显示应用程序，我看不到模态窗口，如果我再次尝试打开模态窗口它没有响应？

任何变通解决方案？

【参考方案1】：

有一个想法，你可以尝试使用Appstate来处理。

检测到app进入前台，然后关闭Modal，应该可以吧？

这是文档上的appstate（功能）示例，在控制台行关闭模态。（如果您使用类组件，与document类示例中使用的理论相同）

import React,  useEffect, useState  from "react";
import  AppState, StyleSheet, Text, View  from "react-native";

const AppStateExample = () => 
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => 
    AppState.addEventListener("change", _handleAppStateChange);

    return () => 
      AppState.removeEventListener("change", _handleAppStateChange);
    ;
  , []);

  const _handleAppStateChange = nextAppState => 
    if (appState.match(/inactive|background/) && nextAppState === "active") 
      console.log("App has come to the foreground!");  // Close the Modal here 
    
    setAppState(nextAppState);
  ;

  return (
    <View style=styles.container>
      <Text>Current state is: appState</Text>
    </View>
  );
;

const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  
);

export default AppStateExample;

试试看。

【讨论】：

我已经检查了 appstate。如果应用程序状态为非活动状态，我已将 modalVisible 设置为 false。但在此之后我面临同样的问题。有什么例子吗？