React-Native 横屏模式方向问题

Question

我还是一个初学者，这里有一个页面，我希望在打开页面时能够以横向模式显示。我安装了 react-native-orientation，但我不确定如何使用它。

我希望在打开应用程序时进入横屏模式，因此我认为我应该在使用 componentWillMount(){ Orientation } 时设置方向。

但我不确定如何设置... 有人能告诉我怎么做吗？

- Kazuki Kimoto

---

你也可以创建自己的节点模块来处理方向。 - Akhilesh Mourya

Answer 1

尝试使用以下程序包可能会对您有所帮助。 react-native-orientation。

- Santosh Sharma

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>

- Naved Khan

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());
    }
}

处理方向锁定的助手类

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();
   }

- Hitesh Sahu