React Native 禁止横屏，实现竖屏锁定

在移动端应用开发中，有时候需要对屏幕进行锁定，以保证应用的稳定性和用户体验。本文将介绍如何在 React Native 应用中禁止横屏，实现竖屏锁定。

禁止横屏

React Native 中可以通过修改 AppDelegate.m 文件来禁止横屏。

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return UIInterfaceOrientationMaskPortrait;
}

上述代码中，supportedInterfaceOrientationsForWindow 方法返回一个 UIInterfaceOrientationMask 类型的值，表示支持的屏幕方向。在本例中，我们返回 UIInterfaceOrientationMaskPortrait，表示仅支持竖屏。

实现竖屏锁定

除了禁止横屏之外，我们还可以通过设置 Info.plist 文件来实现竖屏锁定。

在 Info.plist 文件中，可以添加一个 Supported interface orientations 字段，用于指定支持的屏幕方向。在本例中，我们只需要将该字段设置为 Portrait，即可实现竖屏锁定。

<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
</array>

示例代码

下面是一个完整的示例代码，用于禁止横屏并实现竖屏锁定。

// javascriptcn.com 代码示例
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import Orientation from 'react-native-orientation-locker';

const App = () => {
  useEffect(() => {
    Orientation.lockToPortrait(); // 竖屏锁定
  }, []);

  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default App;

在上述代码中，我们使用了 react-native-orientation-locker 库来实现竖屏锁定。在 useEffect 钩子函数中，我们调用了 Orientation.lockToPortrait() 方法，将屏幕锁定为竖屏。

总结

本文介绍了如何在 React Native 应用中禁止横屏，实现竖屏锁定。通过修改 AppDelegate.m 文件或者设置 Info.plist 文件，我们可以轻松实现屏幕方向的控制。同时，我们还介绍了如何使用 react-native-orientation-locker 库来实现竖屏锁定，并提供了一个完整的示例代码。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657ec47ed2f5e1655d9a0b80