React原生导向不起作用||IOS锁定

rt4zxlrg  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(142)

我用React-native创建了一个应用程序。我做的所有页面都是为肖像模式设计的,除了1页。页面可访问性来自onPress按钮,然后导航到页面,所以我不能在Xcode上锁定方向
我安装了这个软件包,我可以在Android上完美地运行它

import Orientation from 'react-native-orientation';

当我在iOS模拟器上尝试它的每一页上,它可以把方向变成横向。
我把这一行放在每一页componentidmount中,但没有任何变化。

componentDidMount() {
   

    Orientation.lockToPortrait()
...
}

我该怎么办?

anauzrmj

anauzrmj1#

嘿再次@masterAvatarr,
我相信这就是你要找的,如果你需要别的东西,请向我解释:)我们可以让它发生。
我给你举了个简单的例子。
https://github.com/WrathChaos/react-native-portrait-locker-example
我使用React Native Orientation Locker Library
重要的部分是:

  • 确保您手动链接了库(选中AppDelegate.m)
  • 您需要根据您的使用情况制定解锁和锁定纵向模式的逻辑

请查看HomeScreenDetailScreen

import Orientation from "react-native-orientation-locker";

React.useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      // The screen is focused
      // Call any action
      Orientation.unlockAllOrientations();
      Orientation.lockToPortrait();
    });

    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation]);

**注意:**Github Repo上有一个小GIF Demo

qyyhg6bp

qyyhg6bp2#

我建议https://www.npmjs.com/package/expo-screen-orientation
安装库使用

npm install expo-screen-orientation

然后在主入口文件(可以是app.js或index.js)上

import * as ScreenOrientation from "expo-screen-orientation";

然后执行以下操作以将方向锁定为横向。

export default function App() {

  //Locking Orientation
  const [orientation, setOrientation] = useState(1);
  useEffect(() => {
    lockOrientation();
  }, []);
  const lockOrientation = async () => {
    await ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
    );
    const o = await ScreenOrientation.getOrientationAsync();
    setOrientation(o);
  };
//REST OF THE CODE
  return (
    <Components></Components>
  );
});

相关问题