如何在 iOS React Native 应用程序中将方向锁定为纵向？

Question

我试图取消勾选“设备方向设置”，只留下勾选的“纵向”选项，但它不起作用。在 Android 中不旋转，但在 iOS 中旋转，我不知道为什么。它在我的整个应用程序中旋转，无论我是哪个window。你知道锁定由方向引起的旋转的另一种方法吗？

这是我的 Info.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>NEXT PORTAL</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>7.7</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>12</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) necesita acceder a su cámara para poder escanear el código QR.</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>NSMainNibFile</key>
    <string>LaunchScreen</string>
    <key>NSMainNibFile~ipad</key>
    <string>LaunchScreen</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to your microphone (for videos)</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) necesita acceder a la galería para adjuntar fotos.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) necesita acceder a la galería para adjuntar fotos.</string>
    <key>UIAppFonts</key>
    <array>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UIRequiresFullScreen</key>
    <true/>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
</dict>
</plist>

Answer 1

尝试清理项目，重建应用程序，也许会有帮助。有一次我无法锁定设备方向，唯一的方法是勾选纵向选项。

Answer 2

请执行以下步骤以在 React Native 中将方向锁定为纵向 iOS 应用程序：

1] Open Your_React_Native_Project -> go to ios -> project_name.xcodeproj file in X-Code.
2] After opening the project in Xcode, select your project name.
3] Now Goto -> General -> Deployment Info and select device orientation as portrait.
4] Execute the "react-native run-ios" command and compile the entire project. Now you can see the effect.

此外，如果 "Devices" 设置为通用，方向锁定似乎在 iPad 上不起作用。如果它更改为 iPad 则它可以正常工作。

Answer 3

终于，我找到了答案。这不是我期望的解决方案，因为我认为锁定 XCode 就足够了，正如我之前在提问中提到的那样，但至少它有效。

我安装了 react-native-orientation 并在 App.js 文件的构造函数上应用了 Orientation.lockToPortrait() 函数，并将应用程序锁定为纵向。

希望对您有所帮助！

Answer 4

我和你有同样的问题，原来是因为我的AppDelegate.m

中react-native-orientation的配置问题

如果我取消注释这 2 个配置

#import "Orientation.h"

和

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {return [Orientation getOrientation];}

然后它工作正常。但是如果你使用 react-native-orientation，这些配置是必需的。所以我认为最终的解决方案是使用 Orientation.lockToPortrait()

Answer 5

在我的例子中，我总共有 10 个屏幕，其中 2 个屏幕处于肖像模式，8 个屏幕处于横向模式。

从 'react-native-orientation';

导入方向

因此，如果您想将某些屏幕置于横向模式，请使用

Orientation.lockToLandscape()

或者如果你想把一些屏幕设置为 Potrait 模式然后使用

Orientation.lockToPortrait()

如何在 iOS React Native 应用程序中将方向锁定为纵向？

How to lock orientation to Portrait in iOS React Native App?

mobile

orientation

ios

react-native