在移动端应用开发中，有时候需要对屏幕进行锁定，以保证应用的稳定性和用户体验。本文将介绍如何在 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>
示例代码
下面是一个完整的示例代码，用于禁止横屏并实现竖屏锁定。
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ----- ---- - ---- --------------- ------ ----------- ---- ---------------------------------- ----- --- - -- -- - ------------ -- - ----------------------------- -- ---- -- ---- ------ - ------ ------------ ------------- ------- -- -- ------ ------- ----展开代码
在上述代码中，我们使用了 react-native-orientation-locker 库来实现竖屏锁定。在 useEffect 钩子函数中，我们调用了 Orientation.lockToPortrait() 方法，将屏幕锁定为竖屏。
总结
本文介绍了如何在 React Native 应用中禁止横屏，实现竖屏锁定。通过修改 AppDelegate.m 文件或者设置 Info.plist 文件，我们可以轻松实现屏幕方向的控制。同时，我们还介绍了如何使用 react-native-orientation-locker 库来实现竖屏锁定，并提供了一个完整的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ec47ed2f5e1655d9a0b80
