设备方向更改时如何更新主题

如何解决设备方向更改时如何更新主题

我正在尝试使用挂钩实现方向更改。我从app.tsx调用了方向挂钩，我想更新所有使用widthPercentageToDP（）函数的内容（主题，组件中的样式）。我该如何实现。我不知道。

useOrientation.tsx

export let { width,height } = Dimensions.get("window");

const heightPercentageToDP = (heightPercent: string | number): number => {
  // Parse string percentage input and convert it to number.
  const elemHeight =
    typeof heightPercent === "number"
      ? heightPercent
      : parseFloat(heightPercent);

  // Use PixelRatio.roundToNearestPixel method in order to round the layout
  // size (dp) to the nearest one that correspons to an integer number of pixels.
  return PixelRatio.roundToNearestPixel((height * elemHeight) / 100);
};

export const useScreenDimensions = () => {
  const [screenData,setScreenData] = useState({});

  useEffect(() => {
    setScreenData({orientation:currentOrientation()});

    Dimensions.addEventListener("change",(newDimensions) => {
     
      width = newDimensions.screen.width;
      height = newDimensions.screen.height;
      setScreenData({orientation:currentOrientation()}); // can be used with this height and width

      //console.log(newDimensions.window);
    });

    return () => Dimensions.removeEventListener("change",() => {});
  });

  return {
    
    width,height,screenData
  };
};

主题文件

const theme = {
  
    spacing: {
      m:widthPercentageToDP("2%") // it must be updated when orientation changes.
    },borderRadii: {
     s:widthPercentageToDP("5%") // it must be updated when orientation changes. 
    },textVariants: {
     body:{
       fontSize:widthPercentageToDP("%3"),}
    },};

App.tsx

 const {screenData} = useScreenDimensions();
 console.log(screenData)
  
 return (
    <ThemeProvider>
      <LoadAssets {...{ fonts,assets }}>
       <Example/>
      </LoadAssets>
    </ThemeProvider>
  );
}

Example.tsx

export const Example = ({}) => {

     
        return (
            <Box>
                <Text variant="body">hey</Text>

                {/* // it must be updated when orientation changes. */}
                <View style={{width:widthPercentageToDP("40%")}}/> 
                
            </Box>
        );
}

框和主题来自theme.tsx文件。文本组件接受theme.tsx中定义的变体道具

解决方法

使用react-native-orientation，您可以做自己想做的事，然后设备方向就会改变。

示例：

tinymce.init({ 
     selector    :'#client_report',resize      : true,// Good,it is set right :)
     // theme_advanced_resizing: true  // Not needed,as it is theme specific

     // ** Other interesting options (use as needed) **
     branding    : false,// Remove the "Powered by Tiny"
     elementpath : false,// Stop showing the selected element TAG 
     statusbar   : true    // Set the statusbar as visible (yes,you can hide it)
});