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

问题描述

我正在使用这个

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

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

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

解决方法

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

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

    return unsubscribe;
  },[]);

您可以查看其文档 from here。

,

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

在反应导航 5 中尝试此操作

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

);

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

);

,

试试这个谢谢

    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/>
)

,

实际上，您需要检测应用状态是否在前台或后台，或者需要通过编写react-native-immediate-call中添加回调函数strong>android or 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;