Доступ к контексту реакции через функцию

Question

Я сейчас разрабатываю пакет, который дает отзывчивость моего React-виджета.Проблема в том, что скорость отклика зависит не от ширины области просмотра, а от ширины элемента-контейнера-виджета.

В настоящее время я обертываю <App> <ResponsiveProvider>.Этот провайдер подписывается на событие windows.resize и сохраняет формат в значение контекста.

Все дочерние элементы повторно визуализируются при изменении формата.Это нормально.

Теперь, чтобы показать / скрыть компоненты, основанные на текущем формате виджета, я просто мог бы реализовать компонент, который обращается к этому контексту с помощью contextType.

Но мне нужна функция, который я могу использовать в любом месте моего приложения, например: ResponsiveUtil.isSmall() или ResponsiveUtil.getCurrentFormat().

Каков наилучший подход для обеспечения доступа к информации (формату) через функцию?

Спасибо

Answer 1

Я не уверен, что это будет лучший подход, но он будет работать.Вы можете настроить глобальный прослушиватель событий, который будет отправляться при каждом изменении формата в вашем компоненте.Я нашел пакет здесь для глобальных событий, но написать свой собственный тоже не составит труда.Используя react-native-event-listeners, это будет выглядеть примерно так:

ResponsiveUtil.js

import { EventRegister } from 'react-native-event-listeners';

let format = {};

EventRegister.addEventListener('responsive-format-changed', data => {
    format = data;
});

const ResponsiveUtils = {
    getCurrentFormat() {
        return Object.assign({}, format);
    },
    isSmall() {
        //isSmall logic
    }
};

export default ResponsiveUtils;

Затем, в вашем <ResponsiveProvider>, во время события resize,отправить новый формат при обновлении контекста

ResponsiveProvider.js

import { EventRegister } from 'react-native-event-listeners';
//...Other component code
window.resize = () => {
    let format = calculateNewFormat();
    //update context...
    //dispatch new format
    EventRegister.emit('responsive-format-changed', format);
};