反应原生的屏幕方向

Question

我正在尝试使用 expo 在 react native 中添加旋转功能。遵循教程并在谷歌和这里搜索，但不知何故，它们都没有工作。旋转模拟器时未检测到屏幕尺寸。因此，它不会从纵向变为横向，反之亦然。 您可以看到下面我尝试通过一个工作示例尝试的代码，但是当我应用它时它不起作用。非常感谢任何帮助。

const [orientation, setOrientation] = useState("");
const window = useWindowDimensions();

 useEffect(() => {
  Dimensions.addEventListener("change", ({ window: { width, height } }) => {
   if (width < height) {
    // this is in portrait mode
    setOrientation("Portrait");
   } else {
    // this is in landscape mode
    setOrientation("Landscape");
   }
 });
}, []);

return (
  <View style={styles.container}>
   <Text style={{ color: "red", fontSize: 30, fontWeight: "bold" }}>
     {orientation}
   </Text>
  </View>

const styles = StyleSheet.create({
  container: {
  flex: 1,
  alignItems: "center",
  justifyContent: "center",
 },
});

Answer 1

我有一个非常干净有效的方法来解决这个问题

Working Example

创建一个名为 components 的文件夹，并在其中创建一个名为 Orientation.js 的文件

然后在Orientation.js里面

import { Dimensions } from 'react-native';

const msp = (dim, limit) => {
  return dim.scale * dim.width >= limit || dim.scale * dim.height >= limit;
};

const isPortrait = () => {
  const dim = Dimensions.get('screen');
  return dim.height >= dim.width;
};

const isLandscape = () => {
  const dim = Dimensions.get('screen');
  return dim.width >= dim.height;
};

const isTablet = () => {
  const dim = Dimensions.get('screen');
  return (
    (dim.scale < 2 && msp(dim, 1000)) || (dim.scale >= 2 && msp(dim, 1900))
  );
};

const isPhone = () => {
  return !isTablet();
};

export default {
  isPortrait,
  isLandscape,
  isTablet,
  isPhone,
};

然后像这样设置你的state 和useEffect

import Orientation from "./components/Orientation"

const [orientation, setOrientation] = useState(
    Orientation.isPortrait() ? 'portrait' : 'landscape'
  );

  useEffect(() => {
    Dimensions.addEventListener('change', () => {
      setOrientation(Orientation.isPortrait() ? 'portrait' : 'landscape');
    });
  }, []);

这将完全按照您的要求工作

结果：