如何解决方向更改时更新主题
我有响应式,主题和app.tsx文件。我想在方向更改时在app.tsx中更新主题和样式。
Responsive.tsx文件
export let { width,height } = Dimensions.get(
"window"
);
export const widthPercentageToDP = (widthPercent:string|number):number => {
const elemWidth =
typeof widthPercent === "number" ? widthPercent : parseFloat(widthPercent);
return PixelRatio.roundToNearestPixel((width * elemWidth) / 100);
};
export const useScreenDimensions = () => {
const [screenData,setScreenData] = useState({ width,height });
useEffect(() => {
Dimensions.addEventListener("change",(newDimensions) => {
setScreenData(newDimensions.screen);
width = newDimensions.screen.width;
height = newDimensions.screen.height;
console.log(newDimensions.window);
});
return () => Dimensions.removeEventListener("change",() => {});
});
return {
...screenData,isLandscape: screenData.width > screenData.height,};
};
主题文件
const theme = {
spacing: {
m:widthPercentageToDp("7%") // it must be updated when orientation changes
},borderRadii: {
s:widthPercentageToDP("5%") // it must be updated when orientation changes
},
App.tsx
export default App(){
const screenData = useScreenDimensions();
return (
<ThemeProvider>
<LoadAssets {...{ fonts,assets }}>
<Text style={{fontSize:widthPercentageToDP("5%")}}>heyy</Text> // it must be updated
</LoadAssets>
</ThemeProvider>
);
}
我不知道该如何实现。感谢您的帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。