Блог

У меня есть приложение Expo, которое откроет некоторую веб-страницу с перенаправлением на саму выставку. В этом случае это делается для выполнения обратных вызовов 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;
 

Это работает. Однако, если клиент закроет навигатор до обработки веб-перенаправления, приложение застрянет в состоянии загрузки.

Вопрос в следующем: как определить, закрыл ли пользователь открытый веб-браузер?

Я на самом деле не тестировал это — мог бы продолжить — но вы, вероятно, могли бы использовать навигацию по реакции, чтобы определить, находится ли компонент в фокусе или нет. Т. е. когда вы открываете веб-браузер, компонент не находится в фокусе, но когда вы закрываете веб-браузер, компонент снова находится в фокусе.

Для версии 4 навигации react вы бы завернули компонент в withNavigationFocus, чтобы достичь этого: https://reactnavigation.org/docs/4.x/function-after-focusing-screen#triggering-an-action-with-the-withnavigationfocus-higher-order-component. Для 5 и 5 вы можете использовать сфокусированный крючок: https://reactnavigation.org/docs/5.x/function-after-focusing-screen/#re-rendering-screen-with-the-useisfocused-hook