折叠屏横竖屏切换 RN没有切换

在React Native中，屏幕方向的切换可以通过使用Dimensions API来侦测屏幕尺寸的变化，并据此调整应用界面的布局。但是，React Native本身不会自动响应屏幕方向的改变。因此，如果在使用React Native开发应用时遇到了屏幕方向从横屏切换到竖屏，或者从竖屏切换到横屏时没有发生变化的问题，你需要手动监听这些变化并作出相应的调整。

一般来说，可以通过以下步骤来实现屏幕方向切换时的布局调整：

1. 使用`Dimensions`模块获取当前设备的宽度和高度，以此来判断当前是横屏还是竖屏。

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

2. 创建一个状态变量来记录当前屏幕方向。

const [orientation, setOrientation] = useState(width > height ? 'LANDSCAPE' : 'PORTRAIT');

3. 监听屏幕尺寸的变化，并更新状态变量。

const changeOrientation = (newOrientation) => {
  if (newOrientation === 'LANDSCAPE' || newOrientation === 'PORTRAIT') {
    setOrientation(newOrientation);
  }
};

Dimensions.addEventListener('change', ({ window: { width, height } }) => {
  changeOrientation(width > height ? 'LANDSCAPE' : 'PORTRAIT');
});

4. 根据状态变量`orientation`来决定显示横屏布局还是竖屏布局。

return (
  <View>
    {orientation === 'LANDSCAPE' ? (
      <LandscapeView />
    ) : (
      <PortraitView />
    )}
  </View>
);

5. 清除监听器（确保在组件卸载时执行，避免内存泄漏）。

useEffect(() => {
  return () => {
    Dimensions.removeEventListener('change', changeOrientation);
  };
}, []);