2017-02-15 23 views
0

まだ初心者ですが、ページを開くときに私がランドスケープモードで表示したい1ページです。反応ネイティブ向きをインストールしましたが、これをどのように使用できるかわかりません。反応しないネイティブのランドスケープモードオリエンテーション

私はアプリを開いたとき、私は風景モードをしたいので、私は、私が使用したとき、私は向きを設定する必要があることを信じて、componentWillMount(){ Orientation }

が、それをセットアップする方法イムわからない...誰がどのように私に言うことができますか?

+0

をロックするためにそれを使用また、オリエンテーションを処理するために、独自のノードモジュールを作成することができます。 – Akhi

答えて

0

私は同じ問題に出くわしたの代わりに、私は自分が作成したサードパーティ製のモジュールを使用しました。

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

ヘルパークラスは、それがネイティブ

'use strict'; 
import { NativeModules } from 'react-native'; 
module.exports = NativeModules.OrientationHelperModule; 
を反応させるのオリエンテーションロック

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

} 

インポートを処理するために:

私は、ネイティブモジュールに反応しますあなたのコンポーネント内

インポートOrientationHelperModule

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

と向き

componentDidMount =() => { 
    OrientationHelperModule.lockLandscape(); 
    } 
関連する問題