方向更改时更新主题

问题描述

我有响应式，主题和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 (将#修改为@）