react-native风景模式定位

问题描述：

我仍然是初学者，这里是我希望它打开页面时用横向模式显示的一个页面。我安装了react-native-orientation，但我不知道如何使用它。react-native风景模式定位

我想横向模式，当我打开应用程序，所以我相信，当我用我应该设置方向，componentWillMount(){ Orientation }

但林不知道如何设置了......谁能告诉我怎么样？

您也可以创建自己的节点模块来处理方向。 – Akhi

答

尝试以下软件包可能对您有所帮助。

react-native-orientation

答

我来的，而不是用我创造了我自己的第三方模块用同样的问题。

我的阵营机模块：

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

}

它导入阵营本地

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

导入OrientationHelperModule在组件

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

并用它来锁定方位

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

react-native风景模式定位

相关推荐