【稀饭】react native 实战系列教程之自定义原生模块

React 前端之家
前端之家收集整理的这篇文章主要介绍了【稀饭】react native 实战系列教程之自定义原生模块，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据，本节就不作为详细内容来讲解了，详细的代码可以看下我的github，效果如下：

在点击播放时，会跳转到播放界面，并且横屏显示，退出播放界面时，会恢复到竖屏状态。但是，react native并没有给我们提供设置横竖屏的API，因此，我们需要自己使用原生的代码来完成此功能。

使用原生代码，我们可以为react native作什么呢？

  • 一个是功能性上的（模块），比如提供横竖屏设置、数据库存储等
  • 一个是UI层面上的（UI组件），比如可以自定义一个VideoView视频播放器等

就目前项目而言，详情页开发涉及到的两个正好是上面的两种情况，横竖屏设置（功能）和使用原生VideoView播放视频（UI）。

原生模块之横竖屏设置功能开发

在我们项目目录下XiFan/android 存放的是android项目的代码，需要使用Android Studio来开发，如果你不是android开发者，那么你可能需要先搭建android开发环境，这里就不介绍了，可自行网上搜索查阅资料。这里放一个工具下载地址 http://www.androiddevtools.cn/

打开android项目之后（打开之后会弹窗提示更改gradle版本，点击忽略即可），目录结构如下：

module是新建的一个包名，专门存放自定义的组件。开发一个功能组件，需要配对实现一个Module和Package。

实现JAVA端模块

在module包下，新建OrientationModule类，并继承ReactContextBaseJavaModule

public class OrientationModule extends ReactContextBaseJavaModule{

    public OrientationModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "Orientation";
    }

    @Nullable
    @Override
    public Map<String,Object> getConstants() {
        return null;
    }
}

getName方法返回的是该组件的名称（该名称可以加RCT前缀，如RCTOrientation，但JS中调用的还是没有加前缀的Orientation），在JS中供NativeModules使用；getConstants方法返回一组key/value常量属性值，可供JS中调用。具体看实现吧。

首先我们需要提供一个方法，供JS中调用设置应用的横竖屏。要让JS中能调用，需要在方法上使用ReactMethod注解。

@ReactMethod
public void setOrientation(final int orientation){
    UiThreadUtil.runOnUiThread(new Runnable() {
        @Override
        public void run() {
            Activity activity = getCurrentActivity();
            if(activity == null){
                return;
            }
            if(orientation == ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE){
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
                //设置全屏
                Window window = activity.getWindow();
                WindowManager.LayoutParams params = window.getAttributes();
                params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;
                window.setAttributes(params);

            }else if(orientation == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
                //设置非全屏
                Window window = activity.getWindow();
                WindowManager.LayoutParams params = window.getAttributes();
                params.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);
                window.setAttributes(params);
            }
        }
    });

}

这个方法接收一个orientation参数，只支持ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE和ActivityInfo.SCREEN_ORIENTATION_PORTRAIT常量参数值。由于react native是运行在JavaBridge线程，所以在使用android一些功能时，我们需要将在android UI线程里进行操作，因此这里调用UiThreadUtil.runOnUiThread。

那么，我们如何让使用者更方便的使用setOrientation这个方便，而不用知道orientation参数要传什么具体值呢？

这里我们就需要使用上面提到的getConstants方法来定义常量值了。

private static final String ORIENTATION_LANDSCAPE_KEY = "LANDSCAPE";//横屏
private static final String ORIENTATION_PORTRAIT_KEY = "PORTRAIT";//竖屏


@Nullable
@Override
public Map<String,Object> getConstants() {//定义返回值常量
    Map<String,Object> constants = MapBuilder.newHashMap();
    constants.put(ORIENTATION_LANDSCAPE_KEY,ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    constants.put(ORIENTATION_PORTRAIT_KEY,ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    return constants;
}

定义了LANDSCAPE 和 PORTRAIT两个属性常量，并分别赋予值ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE 和 ActivityInfo.SCREEN_ORIENTATION_PORTRAIT

写完了Module，我们需要再写Package。新建OrientationPackage类，并实现ReactPackage接口。

public class OrientationPackage implements ReactPackage{
    @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 Collections.emptyList();
    }
}

OrientationModule是属于NativeModule，所以，我们在createNativeModules方法中返回我们已经实现了的OrientationModule。

最后，我们需要将OrientationPackage注册到react native中，让它能识别到我们的Module。

打开MainApplication类，并将OrientationPackage添加到ReactPackage

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),new OrientationPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

在getPackages方法中增加了我们的OrientationPackage。

接下来就是在JS中使用它了。

实现对应的JS模块

新建VideoPlayScene.js，用于播放视频的场景。我们需要在应用进入该页面时，横屏显示，退出时恢复竖屏。

import React,{Component} from 'react';
import {
    View,WebView,NativeModules
} from 'react-native';
var Orientation = NativeModules.Orientation;

export default class VideoPlayScene extends Component{
    constructor(props){
        super(props);
    }

    componentWillMount(){
        Orientation.setOrientation(Orientation.LANDSCAPE);
    }

    componentWillUnmount(){
        Orientation.setOrientation(Orientation.PORTRAIT);
    }
}

我们需要import NativeModules这个模块

var Orientation = NativeModules.Orientation;

NativeModules点后面的Orientation就是我们在原生代码OrientationModule中getName返回的字符串值。

在componentWillMount 和 componentWillUnmount生命周期中调用setOrientation来实现需求。其中Orientation.LANDSCAPE 和 Orientation.PORTRAIT 就是我们在OrientationModule$getConstants 定义的两个常量值。

那如果在js中需要接收一个回调方法，那么原生代码需要怎么写呢？

在OrientationModule在定义一个方法，并接收一个Callback参数

@ReactMethod
public void getRequestedOrientation(Callback callback){
    int orientation = getReactApplicationContext().getResources().getConfiguration().orientation;
    callback.invoke(orientation);
}

js中调用

componentWillMount(){
    Orientation.getRequestedOrientation((orientation)=>{
        console.log('current orientation :'+ orientation);
    });
    //Orientation.setOrientation(Orientation.LANDSCAPE);
}

这样就完成了横竖屏功能的开发了（不好的是，自定义的Module在IDE下并不能代码提示，有知道如何让它提示的话，请告知一下哈），贴下OrientationModule.java的完整代码

public class OrientationModule extends ReactContextBaseJavaModule{
    private static final String ORIENTATION_LANDSCAPE_KEY = "LANDSCAPE";//横屏
    private static final String ORIENTATION_PORTRAIT_KEY = "PORTRAIT";//竖屏

    public OrientationModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "Orientation";
    }

    @Nullable
    @Override
    public Map<String,Object> getConstants() {//定义返回值
        Map<String,Object> constants = MapBuilder.newHashMap();
        constants.put(ORIENTATION_LANDSCAPE_KEY,ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        constants.put(ORIENTATION_PORTRAIT_KEY,ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        constants.put("initOrientation",getReactApplicationContext().getResources().getConfiguration().orientation);
        return constants;
    }

    @ReactMethod
    public void setOrientation(final int orientation){
        UiThreadUtil.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Activity activity = getCurrentActivity();
                if(activity == null){
                    return;
                }
                if(orientation == ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE){
                    activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
                    //设置全屏
                    Window window = activity.getWindow();
                    WindowManager.LayoutParams params = window.getAttributes();
                    params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;
                    window.setAttributes(params);

                }else if(orientation == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
                    activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
                    //设置非全屏
                    Window window = activity.getWindow();
                    WindowManager.LayoutParams params = window.getAttributes();
                    params.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);
                    window.setAttributes(params);
                }
            }
        });

    }
    @ReactMethod
    public void getRequestedOrientation(Callback callback){
        int orientation = getReactApplicationContext().getResources().getConfiguration().orientation;
        callback.invoke(orientation);
    }
}

总结

本节我们完成了android的自定义模块，使RN能够使用原生提供的能力。而关于js如何向native发送命令以及native如何向js发送事件的问题，原生模块和原生UI组件它们的通信都是一样的，所以我们把这个问题留在下一节来讲述。

原文链接：https://www.f2er.com/react/305884.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作