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类文件
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类文件
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 引用组件
