Ipad 方向横向模式不起作用

Question

我正在尝试实现 Ipad 横向模式，但未检测到设备方向。 我们已经在 info.plist 文件中进行了所有必要的更改。但我们仍然无法根据设备方向获取 windowWidth 和 windowHeight 值。 windowWidth 和 windowHeight 值始终保持不变。

下面是我们尝试过的代码...

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
const isIpad = windowWidth >= 768;  
const [orientation, setOrientation] = useState(getInitialOrientation());

  useEffect(() => {
    const updateOrientation = () => {
      const newOrientation = getOrientation();
      if (newOrientation !== orientation) {
        setOrientation(newOrientation);
      }
    };

    Dimensions.addEventListener('change', updateOrientation);

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

  const getInitialOrientation = () => {
    return windowWidth < windowHeight ? 'PORTRAIT' : windowWidth > 768 ? 'LANDSCAPE' : 'PORTRAIT'; // Adjust the width condition as per your requirement
  }

  const getOrientation = () => {
    return windowWidth < windowHeight ? 'PORTRAIT' : windowWidth > 768 ? 'LANDSCAPE' : 'PORTRAIT'; // Adjust the width condition as per your requirement
  }

我们预计当我们转动设备方向时 windowWidth 和 windowHeight 值会发生变化，但它没有发生。

Answer 1

此代码最初只会执行一次：

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

使用传递给回调的参数

updateOrientation

->

({ window: { width, height } })

    const updateOrientation = (({ window: { width, height } })) => {
      const newOrientation = getOrientation(width, height);
      if (newOrientation !== orientation) {
        setOrientation(newOrientation);
      }
    };

我创建了一个示例：

import { Text, SafeAreaView, StyleSheet, Dimensions } from 'react-native';
import { useEffect, useState } from 'react';

// You can import supported modules from npm
import { Card } from 'react-native-paper';

// or any files within the Snack
import AssetExample from './components/AssetExample';

export function useOrientation() {
  const [orientation, setOrientation] = useState('undetermined');

  useEffect(() => {
    Dimensions.addEventListener('change', ({ window: { width, height } }) => {
      if (width < height) {
        setOrientation('PORTRAIT');
      } else {
        setOrientation('LANDSCAPE');
      }
    });
    return () => {
      Dimensions.removeEventListener('change');
    };
  }, []);

  return orientation;
}

export default function App() {
  const orientation = useOrientation();

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>{orientation}</Text>
      <Card>
        <AssetExample />
      </Card>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});