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

  

  

  

react native 添加第三方插件react-native-orientation(横竖屏设置功能 android)的更多相关文章

  1. android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效

    android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效    在之前的版本中都是在Man ...

  2. layui 添加第三方插件

    关于 layui 添加第三方 JS 库 在写公司项目时,需要将第三方 JS 库整合到 layui 中,具体操作如下: 示例:https://www.jianshu.com/p/7a182e8bff10 ...

  3. react material-ui 添加jss插件

    jss.config.js import { create } from "jss"; import preset from "jss-preset-default&qu ...

  4. android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效的解决方法

    Android横竖屏幕切换时注意4.0以上配置configChanges要加上screenSize,要不还会调用onCreate(). <activity android:name=" ...

  5. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  6. CORDOVA :添加cordova-plugin-file-opener2插件cordova打包报错

    原文:CORDOVA :添加cordova-plugin-file-opener2插件cordova打包报错 最近在接触android项目,其中涉及到APP自动更新的问题,当新APP下载成功后需要打开 ...

  7. react native-调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错

    调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...

  8. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

  9. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

随机推荐

  1. TCP协议和UDP协议的区别

    1. TCP协议面向连接. UDP协议面向非连接 (有无链接)2. TCP协议传输速度慢. UDP协议传输速度快 (传输速度)3. TCP协议保证数据顺序. UDP协议不保证 (数据的有序性. 在IP ...

  2. Android L(5.0)源码之图形与图像处理之简单图片——Bitmap

    最近在研究android 5.0的gallery模块,学习了相关的知识点,准备写点博客总结一下,有时间了会补充完整

  3. jquery中(function($){...})(jQuery)是什么

    调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){...})(param)而(function($){...}) (jQuery) ...

  4. imagebutton、imageview的属性

    [转]http://blog.csdn.net/victoryckl/article/details/14162131 http://blog.sina.com.cn/s/blog_68b3fdc30 ...

  5. 【贪心】【堆】Gym -100956D - Greedy Game

    题意:给定n个物品,每个物品对于A和B来说具有不同的价值,记为ai,bi,两人交替取,A先手,A总是贪心地取当前剩下的物品中,对于他价值最高的,如果有多个,则任取一个.问B在最坏情况下,能取到的物品的 ...

  6. 2782: [HNOI2006]最短母串

    2782: [HNOI2006]最短母串 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 3  Solved: 2[Submit][Status][Web ...

  7. ajax 跨域了 cors

    <?php /** * Author: humanhuang * Date: 13-12-17 */ header('Access-Control-Allow-Origin:*'); heade ...

  8. reg 正则

    //转化为camel形式 var text = 'border-color-base'; text.replace(/-(\w{1})/g, function (match, chr1) { retu ...

  9. 关于ThreadLocal和一般的线程同步的详细解释

    http://blog.csdn.net/lufeng20/article/details/24314381

  10. iOS 程序开发

    准备 iOS 开发 之 编程知识点 iOS 程序调试 iOS 之 OC开发实战 iOS 架构模式 iOS 之 新功能.扩展