我目前正在开发一个软件包,这给了我的反应响应能力。问题是,响应性不取决于视口宽度,而是取决于小部件元素元素的宽度。
目前,我将<App>
用<ResponsiveProvider>
包装。此提供商订阅了windows.resize
事件,并将格式存储到上下文的值中。
如果格式更改,则所有儿童元素都会重新渲染。很好。
现在,对于基于当前小部件格式的显示/隐藏组件,我可以实现一个组件,该组件可以使用contextType
。
但是我需要一个函数,我可以在应用程序的任何地方使用,例如: ResponsiveUtil.isSmall()
或 ResponsiveUtil.getCurrentFormat()
。
可以通过函数访问信息(格式)的最佳方法?
谢谢
我不确定这是否是 best 方法,但它会起作用。您可以设置一个全局事件侦听器,每当组件中的格式更改时,该侦听器将被派发。我在这里找到了一个用于全球事件的软件包,但也不难编写自己的包裹。使用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);
};