Question

我需要暂停视频和其他一些操作，以便在用户单击“主页”按钮或使用滑动操作切换到另一个应用程序时执行。我查看了本机AppState，但是当某些设备在Android上单击主页按钮时，它没有调用事件侦听器。为了使本机应用程序状态正常工作，是否存在任何兼容性最低版本要求？

我尝试的代码如下

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

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

const _handleAppStateChange = (nextAppState: any) => {
    console.log(nextAppState);
};

在单击“主页”按钮时/在某些Android设备上切换到另一个应用程序时，控制台未打印。无论如何，我可以最好使用react-native来实现此目的，而无需使用任何外部库。

Answer 1

根据您的要求，在react-native中，要检测应用程序是在前台还是在后台，您不需要添加主页按钮侦听器，我们可以借助AppState轻松实现此目的，请查看以下示例，

_handleAppStateChange = (nextAppState: any) => {
    if (this.state.appState === "active" && nextAppState === "background") {

        // this condition calls when app goes in background mode
        // here you can detect application is in background, and you can pause your video

    } else if (this.state.appState === "background" && nextAppState === "active") {
    
        // this condition calls when app is in foreground mode
        // here you can detect application is in active state again, 
        // and if you want you can resume your video

    }
   this.setState({ appState: nextAppState });
};

您还需要将AppState侦听器附加到应用程序以检测应用程序状态，例如，

componentDidMount() {
     AppState.addEventListener("change", _handleAppStateChange);
}

例如，在卸载应用程序组件时，分离应用程序状态侦听器

componentWillUnmount {
     AppState.removeEventListener("change", _handleAppStateChange);
}

或者，如果您正在使用功能组件，则可以在useEffect中附加或分离应用程序状态侦听器，例如

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

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

在Android中响应本地监听应用程序前台或后台切换

1 个答案: