react native 添加第三方插件react-native-orientation（横竖屏设置功能 android）

朴灿烈づ我的快乐病毒、 2021-12-23 10:43 422阅读 0赞

Installation  
  
**1.install rnpm**  
  
Run npm install -g rnpm

**2.via rnpm**  
  
Run rnpm install react-native-orientation  
  
Note: rnpm will install and link the library automatically.  
  
via npm  
  
　　Run npm install react-native-orientation --save

**3.Linking**

Using rnpm (iOS + Android)  
  
　Run rnpm link react-native-orientation  
  
  
Android 修改配置以及添加组件相关文件  
  
**1. In android/setting.gradle**  
  
...  
include ':react-native-orientation', ':app'  
project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node\_modules/react-native-orientation/android')  
  
**2. In android/app/build.gradle**  
  
...  
dependencies \{  
...  
compile project(':react-native-orientation')  
\}  
  
**3. Register module (in MainApplication.java)**  
  
com.awesomeproject1; // <--- import  
  
public class MainApplication extends Application implements ReactApplication \{  
......  
@Override  
protected List<ReactPackage> getPackages() \{  
return Arrays.<ReactPackage>asList(  
new MainReactPackage(),  
new OrientationPackage()  
);  
\}  
......\}  
  
 **4. 添加OrientationModule类文件**

**![315266-20170214183307097-568513759.png][]**

**package com.awesomeproject1.orientationPackageModule;  
  
import android.app.Activity;  
import android.content.BroadcastReceiver;  
import android.content.Context;  
import android.content.Intent;  
import android.content.IntentFilter;  
import android.content.pm.ActivityInfo;  
import android.content.res.Configuration;  
import android.util.Log;  
  
import com.facebook.common.logging.FLog;  
import com.facebook.react.bridge.Arguments;  
import com.facebook.react.bridge.Callback;  
import com.facebook.react.bridge.LifecycleEventListener;  
import com.facebook.react.bridge.ReactApplicationContext;  
import com.facebook.react.bridge.ReactContextBaseJavaModule;  
import com.facebook.react.bridge.ReactMethod;  
import com.facebook.react.bridge.WritableMap;  
import com.facebook.react.common.ReactConstants;  
import com.facebook.react.modules.core.DeviceEventManagerModule;  
  
import java.util.HashMap;  
import java.util.Map;  
  
import javax.annotation.Nullable;  
  
public class OrientationModule extends ReactContextBaseJavaModule implements LifecycleEventListener\{  
final BroadcastReceiver receiver;  
  
public OrientationModule(ReactApplicationContext reactContext) \{  
super(reactContext);  
final ReactApplicationContext ctx = reactContext;  
  
receiver = new BroadcastReceiver() \{  
@Override  
public void onReceive(Context context, Intent intent) \{  
Configuration newConfig = intent.getParcelableExtra("newConfig");  
Log.d("receiver", String.valueOf(newConfig.orientation));  
  
String orientationValue = newConfig.orientation == 1 ? "PORTRAIT" : "LANDSCAPE";  
  
WritableMap params = Arguments.createMap();  
params.putString("orientation", orientationValue);  
if (ctx.hasActiveCatalystInstance()) \{  
ctx  
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)  
.emit("orientationDidChange", params);  
\}  
\}  
\};  
ctx.addLifecycleEventListener(this);  
\}  
  
@Override  
public String getName() \{  
return "Orientation";  
\}  
  
@ReactMethod  
public void getOrientation(Callback callback) \{  
final int orientationInt = getReactApplicationContext().getResources().getConfiguration().orientation;  
  
String orientation = this.getOrientationString(orientationInt);  
  
if (orientation == "null") \{  
callback.invoke(orientationInt, null);  
\} else \{  
callback.invoke(null, orientation);  
\}  
\}  
  
@ReactMethod  
public void lockToPortrait() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) \{  
return;  
\}  
activity.setRequestedOrientation(ActivityInfo.SCREEN\_ORIENTATION\_PORTRAIT);  
\}  
  
@ReactMethod  
public void lockToLandscape() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) \{  
return;  
\}  
activity.setRequestedOrientation(ActivityInfo.SCREEN\_ORIENTATION\_SENSOR\_LANDSCAPE);  
\}  
  
@ReactMethod  
public void lockToLandscapeLeft() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) \{  
return;  
\}  
activity.setRequestedOrientation(ActivityInfo.SCREEN\_ORIENTATION\_LANDSCAPE);  
\}  
  
@ReactMethod  
public void lockToLandscapeRight() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) \{  
return;  
\}  
activity.setRequestedOrientation(ActivityInfo.SCREEN\_ORIENTATION\_REVERSE\_LANDSCAPE);  
\}  
  
@ReactMethod  
public void unlockAllOrientations() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) \{  
return;  
\}  
activity.setRequestedOrientation(ActivityInfo.SCREEN\_ORIENTATION\_UNSPECIFIED);  
\}  
  
@Override  
public @Nullable Map<String, Object> getConstants() \{  
HashMap<String, Object> constants = new HashMap<String, Object>();  
int orientationInt = getReactApplicationContext().getResources().getConfiguration().orientation;  
  
String orientation = this.getOrientationString(orientationInt);  
if (orientation == "null") \{  
constants.put("initialOrientation", null);  
\} else \{  
constants.put("initialOrientation", orientation);  
\}  
  
return constants;  
\}  
  
private String getOrientationString(int orientation) \{  
if (orientation == Configuration.ORIENTATION\_LANDSCAPE) \{  
return "LANDSCAPE";  
\} else if (orientation == Configuration.ORIENTATION\_PORTRAIT) \{  
return "PORTRAIT";  
\} else if (orientation == Configuration.ORIENTATION\_UNDEFINED) \{  
return "UNKNOWN";  
\} else \{  
return "null";  
\}  
\}  
  
@Override  
public void onHostResume() \{  
final Activity activity = getCurrentActivity();  
  
assert activity != null;  
activity.registerReceiver(receiver, new IntentFilter("onConfigurationChanged"));  
\}  
@Override  
public void onHostPause() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) return;  
try  
 \{  
activity.unregisterReceiver(receiver);  
\}  
catch (java.lang.IllegalArgumentException e) \{  
FLog.e(ReactConstants.TAG, "receiver already unregistered", e);  
\}  
\}  
  
@Override  
public void onHostDestroy() \{  
final Activity activity = getCurrentActivity();  
if (activity == null) return;  
try  
 \{  
activity.unregisterReceiver(receiver);  
\}  
catch (java.lang.IllegalArgumentException e) \{  
FLog.e(ReactConstants.TAG, "receiver already unregistered", e);  
\}\}  
\}**

**5. 添加OrientationPackage类文件**

**　　![315266-20170214183342050-1526988299.png][]**

**　　　　package com.awesomeproject1.orientationPackageModule;  
  
import com.facebook.react.ReactPackage;  
import com.facebook.react.bridge.JavaScriptModule;  
import com.facebook.react.bridge.NativeModule;  
import com.facebook.react.bridge.ReactApplicationContext;  
import com.facebook.react.uimanager.ViewManager;  
  
import java.util.Arrays;  
import java.util.Collections;  
import java.util.List;  
  
public class OrientationPackage implements ReactPackage \{  
  
public OrientationPackage() \{  
\}  
  
@Override  
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) \{  
return Arrays.<NativeModule>asList(  
new OrientationModule(reactContext)  
);  
\}  
  
@Override  
public List<Class<? extends JavaScriptModule>> createJSModules() \{  
return Collections.emptyList();  
\}  
  
@Override  
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) \{  
return Arrays.asList();  
\}  
\}**

**6.index.android.js 引用组件**

**　　![315266-20170214183457254-794682617.png][]**

**　　**

**　　![315266-20170214183609425-1379883427.png][]**

转载于:https://www.cnblogs.com/zijuan/p/6398912.html

[315266-20170214183307097-568513759.png]: /images/20211223/f0c89424659141ecbe3a5fdea8d5ff61.png
[315266-20170214183342050-1526988299.png]: /images/20211223/bb06aaec21c949c08979eb7c1fd42605.png
[315266-20170214183457254-794682617.png]: /images/20211223/ad900e55b36b4ce594126eb6b229b3da.png
[315266-20170214183609425-1379883427.png]: /images/20211223/5cf610f71a6a4b30b4df8cda8017696f.png