Question

我目前正在开发一个程序包，该程序包使我的React小部件具有响应能力。问题在于，响应速度不取决于视口宽度，而取决于widget-container-element的宽度。

目前，我正在用<App>包装我的<ResponsiveProvider>。该提供程序订阅windows.resize事件，并将格式存储到上下文的值中。

如果格式更改，所有子元素都将重新呈现。很好。

现在，对于基于当前窗口小部件格式的显示/隐藏组件，我只需要实现一个组件即可，该组件可以使用contextType访问此上下文。

但是我需要一个函数，可以在应用程序的任何地方使用它，例如：ResponsiveUtil.isSmall()或ResponsiveUtil.getCurrentFormat()。

通过功能可访问信息（格式）的最佳方法是什么？

谢谢

Answer 1

我不确定这是否是最好的方法，但是它会起作用。您可以设置一个全局事件侦听器，每次组件中的格式更改时将调度该事件。我为全局事件找到了一个程序包here，但是编写自己的程序也不难。使用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);
};

通过函数访问React Context

1 个答案: