如何在 iOS React Native App 中将方向锁定为纵向？

Question

我正在尝试取消勾选“设备方向设置”，留下纵向选项，但它不起作用。在 Android 中它不会旋转，但在 iOS 中会旋转，我不知道为什么。无论我在哪个窗口，它都会在我的整个应用程序中旋转。 您知道锁定由方向引起的旋转的另一种替代方法吗？

这是我的 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

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

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

希望对你有帮助！

Answer 2

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

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.

还观察到，如果“设备”设置为通用，方向锁定似乎在 iPad 上不起作用。如果换成 iPad 就好了。

Answer 3

我和你有同样的问题，原来是因为我的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 4

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