检查屏幕是否在 React Native 中变得模糊或聚焦？答案

【问题标题】：Check if screen is getting blurred or focus in React native?检查屏幕是否在 React Native 中变得模糊或聚焦？
【发布时间】：2021-04-10 21:47:57
【问题描述】：

我正在使用这个

useEffect(() => {
        const navFocusListener = navigation.addListener('didFocus', () => {
        console.log('focus');
    });

    return () => {
        navFocusListener.remove();
    };
  }, []);

我正在使用此代码也尝试过其他侦听器。但没有任何好处，我正在使用 react-native-immediate-call 包进行 ussd 拨号，但因为它没有任何回调。所以我将此功能称为拨号器打开，用于拨打 USSD 代码。所以现在我希望当ussd拨号完成后返回屏幕，一个api将调用以获得响应。那么我怎样才能检测到 USSD 拨号正在运行或已完成，以便我可以向 api 发出请求。

【问题讨论】：

你试过我的答案了吗？ stackoverflow.com/a/65697776/8079868

标签： react-native event-listener react-functional-component ussd

【解决方案1】：

对于焦点监听器；您必须将 'didFocus' 更改为 'focus'，如果您使用的是 react navigation v5+，您应该更新如下：

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, []);

您可以查看其文档from here。

【讨论】：

这不起作用，如果我导航到另一个屏幕，我也尝试过这个工作。但在这里我不是在导航。这是获取 USSD 的 3rd 方 api 模式。所以在这里我想在 USSD 拨号器模式将被用户取消或完成时点击一个功能。然后我想在拨号器完成后点击一个 api 键。

【解决方案2】：

试试这个谢谢

    import { NavigationEvents } from "react-navigation";
    
    callback=()=>{
    alert('I m always working when you come this Screen')
    }
    
    in return (
    <Your Code>
    <NavigationEvents onWillFocus={() => callback()} />
    <Your Code/>
)

【讨论】：

【解决方案3】：

其实你需要检测app状态是在foreground还是background或者需要通过编写的native code来给react-native-immediate-call添加回调函数android或ios这样的包

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

const AppStateExample = () => {
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

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

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

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

    appState.current = nextAppState;
    setAppStateVisible(appState.current);
    console.log("AppState", appState.current);
  };

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

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

export default AppStateExample;

【讨论】：

【解决方案4】：

在 react-navigation 5 中，您可以执行此操作来检查屏幕是焦点还是模糊，使用usefocuseffect-hook在 React Navigation 5 中尝试此操作

useEffect(
() => navigation.addListener('focus', () => {}),
[navigation]

);

useEffect(
() => navigation.addListener('blur', () => {}),
[navigation]

);

【讨论】：