react-native 横向模式方向

Question

我还是个初学者。这是我想在打开页面时以横向模式显示的页面。我安装了react-native-orientation，但我不知道如何使用它。

我打开应用程序时想要横向模式，所以我认为我在使用时应该设置方向，

componentWillMount(){ Orientation } 

但我不知道如何设置...有人能告诉我怎么设置吗？

Answer 1

尝试以下套餐可能会对您有所帮助。

反应原生方向

Answer 2

只有这一行添加到您的项目中

android:screenOrientation="landscape"

android->app->src->main->AndroidManifest.xml

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="landscape"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

Answer 3

我遇到了同样的问题，而不是使用我自己创建的第三方模块。

我的 React Native 模块：

public class OrientationHelperModule extends ReactContextBaseJavaModule {
    private static final String TAG = OrientationHelperModule.class.getSimpleName();
    private static final String MODULE_NAME = "OrientationHelperModule";

    private final ReactApplicationContext reactAppContext;


    @Override
    public String getName() {
        return MODULE_NAME;
    }

    public OrientationHelperModule(ReactApplicationContext reactAppContext) {
        super(reactAppContext);
        this.reactAppContext = reactAppContext;
    }

    @ReactMethod
    public void lockLandscape() {
        OrientationUtils.lockOrientationLandscape(getCurrentActivity());
    }

    @ReactMethod
    public void unlockOrientation() {
        OrientationUtils.unlockOrientation(getCurrentActivity());
    }

    @ReactMethod
    public void lockPortrait() {
        OrientationUtils.lockOrientationPortrait(getCurrentActivity());
    }
}

处理方向锁的 Helper 类

import android.app.Activity;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.os.Build;
import android.view.Surface;
import android.view.WindowManager;

/*  * This class is used to lock orientation of Android app in any Android devices  
 */

public class OrientationUtils {
    private OrientationUtils() {
    }

    /**
     * Locks the device window in landscape mode.
     */
    public static void lockOrientationLandscape(Activity activity) {
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
    }

    /**
     * Locks the device window in portrait mode.
     */
    public static void lockOrientationPortrait(Activity activity) {
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    /**
     * Locks the device window in actual screen mode.
     */
    public static void lockOrientation(Activity activity) {
        final int orientation = activity.getResources().getConfiguration().orientation;
        final int rotation = ((WindowManager) activity.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay()
                .getRotation();

        // Copied from Android docs, since we don't have these values in Froyo 
        // 2.2 
        int SCREEN_ORIENTATION_REVERSE_LANDSCAPE = 8;
        int SCREEN_ORIENTATION_REVERSE_PORTRAIT = 9;

        // Build.VERSION.SDK_INT <= Build.VERSION_CODES.FROYO 
        if (!(Build.VERSION.SDK_INT <= Build.VERSION_CODES.FROYO)) {
            SCREEN_ORIENTATION_REVERSE_LANDSCAPE = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
            SCREEN_ORIENTATION_REVERSE_PORTRAIT = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT;
        }

        if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_90) {
            if (orientation == Configuration.ORIENTATION_PORTRAIT) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            } else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            }
        } else if (rotation == Surface.ROTATION_180 || rotation == Surface.ROTATION_270) {
            if (orientation == Configuration.ORIENTATION_PORTRAIT) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT);
            } else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE);
            }
        }
    }

    /**
     * Unlocks the device window in user defined screen mode.
     */
    public static void unlockOrientation(Activity activity) {
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);
    }

} 

在React Native中导入

'use strict';
import { NativeModules } from 'react-native';
module.exports = NativeModules.OrientationHelperModule;

在组件中导入

OrientationHelperModule

  import OrientationHelperModule from './src/modules/OrientationHelperModule'

并用它来锁定方向

  componentDidMount = () => {
    OrientationHelperModule.lockLandscape();
   }