世博会:如何检测WebBrowser实例何时被用户关闭？

Question

我有一个世博会应用程序，将打开一些网页与一个重定向的博览会本身。在这种情况下，这将执行3DS回调。以下是一个非常简化的版本：

import React, {
  FC, useEffect, useState,
} from 'react';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';
import {
  Button,
} from '@private/apps-components';
import {
  ButtonProps,
  View,
} from 'react-native';

export const MyComponent: FC = () => {
  const [loading, setLoading] = useState<boolean>(false);

  const urlEventHandler = async (event): Promise<void> => {
    console.log('url-event', event);
    setLoading(false);
    // Stuff...
  };

  useEffect(() => {
    Linking.addEventListener('url', urlEventHandler);

    return () => Linking.removeEventListener('url', urlEventHandler);
  }, []);

  const handlePress: ButtonProps['onPress'] = () => {
    setLoading(false);
    WebBrowser.openBrowserAsync(aRandomUrlThatWillRedirectToTheApp, {
      showInRecents: true,
    })

  }

  return (
    <View>
      <Button
        title="Test"
        onPress={handlePress}
        loading={loading}
      />
    </View>
  );
};

export default null;

这很管用。但是，如果客户在处理web重定向之前关闭导航器，则应用程序将停留在加载状态。

问题是:如何检测用户是否关闭了打开的WebBrowser？

Answer 1

使用AppState解决了这个问题：

https://reactnative.dev/docs/appstate

if (appState === "active") { // do things after closing the browser }

Answer 2

我还没有真正测试过这个--可以跟踪--但是您可能可以使用react导航来检测组件是否在焦点上。当您打开web浏览器时，组件不在焦点，但当您关闭web浏览器时，组件将返回焦点。

对于react导航版本4，您可以将组件包装在withNavigationFocus中，以实现这一目标：https://reactnavigation.org/docs/4.x/function-after-focusing-screen#triggering-an-action-with-the-withnavigationfocus-higher-order-component。对于5和5+，可以使用useIsFocused钩子：https://reactnavigation.org/docs/5.x/function-after-focusing-screen/#re-rendering-screen-with-the-useisfocused-hook