即使添加了屏幕方向锁定，Android 屏幕方向

Question

我有一个 React Native 应用程序，我目前正在更新 UI。 该应用程序的要求之一是在纵向模式下锁定屏幕方向。 为此，我在清单文件中添加了android:screenOrientation="portrait" 。 它在实时应用程序中运行良好，但是现在使用更新的 UI，它不再工作了。 我尝试了很多东西，但没有任何帮助。

我正在共享清单文件，新旧 package.json 文件，如果有人知道，请告诉我。

Android 清单

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.xxxx">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />

    <application
        android:name=".MainApplication"
        android:allowBackup="false"
        android:hardwareAccelerated="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustPan" />
        <activity
            android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
            android:launchMode="singleTask"
            android:theme="@style/BootTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="xxxx" />
            </intent-filter>
        </activity>

        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

老Package.json

{
    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint .",
        "prettier": "prettier --write src/**/*.js"
    },
    "dependencies": {
        "@apollo/client": "^3.1.3",
        "@react-native-community/async-storage": "^1.11.0",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-community/netinfo": "^5.9.5",
        "@react-native-firebase/analytics": "^7.3.1",
        "@react-native-firebase/app": "^8.2.0",
        "@react-native-firebase/crashlytics": "^8.1.2",
        "@react-navigation/bottom-tabs": "^5.7.2",
        "@react-navigation/native": "^5.7.1",
        "@react-navigation/stack": "^5.7.1",
        "amazon-cognito-identity-js": "^4.3.3",
        "aws-amplify": "3.0.21",
        "aws-amplify-react-native": "4.2.2",
        "aws-sdk": "^2.719.0",
        "d3-shape": "^1.3.7",
        "date-fns": "^2.15.0",
        "graphql": "^15.3.0",
        "i18n-js": "^3.7.1",
        "lodash": "^4.17.19",
        "lottie-ios": "^3.1.8",
        "lottie-react-native": "^3.5.0",
        "moment": "^2.29.0",
        "paho-mqtt": "^1.1.0",
        "ramda": "^0.27.0",
        "react": "16.13.1",
        "react-native": "0.63.3",
        "react-native-actionsheet": "^2.4.2",
        "react-native-awesome-alerts": "^1.3.2",
        "react-native-bootsplash": "^2.2.6",
        "react-native-camera": "^3.39.1",
        "react-native-device-info": "^5.6.2",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-inappbrowser-reborn": "^3.4.0",
        "react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#fb40649a9c84aa23d6a55355e9e0e432795967a6",
        "react-native-keyboard-spacer": "^0.4.1",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-loading-dots": "^1.1.1",
        "react-native-localize": "^1.4.1",
        "react-native-reanimated": "^1.9.0",
        "react-native-safe-area-context": "^3.1.1",
        "react-native-screens": "^2.9.0",
        "react-native-simple-radio-button": "^2.7.4",
        "react-native-snap-carousel": "^3.9.1",
        "react-native-status-bar-height": "^2.5.0",
        "react-native-svg": "^12.1.0",
        "react-native-svg-charts": "^5.4.0",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rn-horizontal-switcher": "^1.1.0",
        "rn-motion": "^1.0.2",
        "tinygradient": "^1.1.1",
        "typescript": "^3.9.7"
    },
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/runtime": "^7.10.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.1.0",
        "eslint": "^7.5.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react-hooks": "^4.0.8",
        "jest": "^26.1.0",
        "metro-react-native-babel-preset": "^0.61.0",
        "prettier": "^2.0.5",
        "react-native-svg-transformer": "^0.14.3",
        "react-test-renderer": "16.13.1"
    },
    "jest": {
        "preset": "react-native"
    }
}

全新 Package.json

{

    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint .",
        "prettier": "prettier --write src/**/*.js",
        "postinstall": "patch-package"
    },
    "dependencies": {
        "@apollo/client": "^3.1.3",
        "@aws-amplify/api": "^3.2.17",
        "@aws-amplify/auth": "^3.4.17",
        "@aws-amplify/core": "^3.8.9",
        "@aws-amplify/pubsub": "^3.2.15",
        "@react-native-community/async-storage": "^1.12.1",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-community/netinfo": "^5.9.10",
        "@react-native-firebase/analytics": "^7.3.1",
        "@react-native-firebase/app": "^8.2.0",
        "@react-native-firebase/crashlytics": "^8.1.2",
        "@react-navigation/bottom-tabs": "^5.7.2",
        "@react-navigation/material-top-tabs": "^5.3.10",
        "@react-navigation/native": "^5.7.1",
        "@react-navigation/stack": "^5.7.1",
        "amazon-cognito-identity-js": "^4.3.3",
        "aws-amplify-react-native": "4.2.2",
        "aws-appsync": "^4.0.2",
        "aws-sdk": "^2.819.0",
        "d3-shape": "^1.3.7",
        "date-fns": "^2.15.0",
        "graphql": "^15.3.0",
        "graphql-tag": "^2.11.0",
        "i18n-js": "^3.7.1",
        "lodash": "^4.17.19",
        "lottie-ios": "3.1.8",
        "lottie-react-native": "^3.5.0",
        "moment": "^2.29.0",
        "paho-mqtt": "^1.1.0",
        "patch-package": "^6.2.2",
        "postinstall-postinstall": "^2.1.0",
        "prop-types": "^15.7.2",
        "ramda": "^0.27.0",
        "react": "16.13.1",
        "react-hook-form": "^6.14.2",
        "react-native": "0.63.3",
        "react-native-actionsheet": "^2.4.2",
        "react-native-awesome-alerts": "^1.3.2",
        "react-native-bootsplash": "^3.1.2",
        "react-native-camera": "^3.39.1",
        "react-native-device-info": "^5.6.2",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-inappbrowser-reborn": "^3.4.0",
        "react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#fb40649a9c84aa23d6a55355e9e0e432795967a6",
        "react-native-keyboard-spacer": "^0.4.1",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-loading-dots": "^1.1.1",
        "react-native-localize": "^1.4.1",
        "react-native-reanimated": "^1.9.0",
        "react-native-redash": "^10.0.1",
        "react-native-safe-area-context": "^3.1.1",
        "react-native-screens": "^2.9.0",
        "react-native-simple-radio-button": "^2.7.4",
        "react-native-snap-carousel": "4.0.0-beta.4",
        "react-native-status-bar-height": "^2.5.0",
        "react-native-svg": "^12.1.0",
        "react-native-svg-charts": "^5.4.0",
        "react-native-tab-view": "^2.15.2",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rn-horizontal-switcher": "^1.1.0",
        "tinygradient": "^1.1.1",
        "typescript": "^3.9.7",
        "uuid": "^3.4.0"
    },
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/runtime": "^7.10.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.1.0",
        "eslint": "^7.5.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react-hooks": "^4.0.8",
        "jest": "^26.1.0",
        "metro-react-native-babel-preset": "^0.61.0",
        "prettier": "^2.0.5",
        "prop-types": "^15.7.2",
        "react-native-svg-transformer": "^0.14.3",
        "react-test-renderer": "16.13.1"
    },
    "jest": {
        "preset": "react-native"
    }
}

Answer 1

最后，我能够解决这个问题。 问题出在路由器文件中（导航设置）。

我使用react-native-screens/native-stack中的createNativeStackNavigator而不是@react-navigation/stack中的createStackNavigator以获得更好的性能。

但是，我不知道screenOptions中有一个screenOrientation选项。 默认情况下，它将允许导致问题的所有选项。 在 ios 中，默认为UIInterfaceOrientationMaskAllButUpsideDown 。

这是文档。

搜索screenOrientation