React Native封装Android原生UI和Android原生模块，并且集成腾讯云点播的Android SDK

  今天记录一下我的一个React Native Demo：

具体实现了对Android原生UI的封装和Android原生模块的封装，并且集成腾讯云点播的Android SDK。

功能：第一个页面显示腾讯云点播的视频播放控件，并播放一段视频。点击视频控件跳转到第二个页面。

步骤：

  一、创建React Native项目；

          react-native init TestDemo

  二、封装Android原生模块；

          在TestDemo/android下创建一个GoToActivity.java文件，此类继承ReactContextBaseJavaModule，实现其中的方法。

  三、封装Android原生UI；

          在TestDemo/android下创建一个自定义View，命名为CustomView；

          再创建一个ReactCustomViewManager.java文件，此类继承SimpleViewManager<CustomView>，泛型是我上面自定义的View，目的就是封装这个自定义View，给React Native使用。

  四、把写好的原生模块、原生UI进行注册；

         在TestDemo/android下创建一个MyReactPackage.java文件，此类继承ReactPackage，实现其中的方法，在createNativeModules方法中注册原生模块，在createViewManagers方法中注册原生UI。然后把MyReactPackage注册到MyApplication中getPackages方法中。

  五、下载腾讯云点播Android SDK（下载地址：http://download-1252463788.cossh.myqcloud.com/RTMPSDKAndroid2.0.2.2801.zip）；

          将SDK的jniLibs文件夹拷贝到TestDemo/android/app/src/main/下；

       导入jar包，在Android Studio工程中找到刚才的jniLibs目录，展开目录，可以看到txrtmpsdk.jar，点击右键选择“Add As Library...”；

       在AndroidManifest.xml中配置APP的权限，音视频类APP一般需要以下权限：

        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
        <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
        <uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_LOGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.Camera"/>
<uses-feature android:name="android.hardware.camera.autofocus" />

  六、在自定义View--CustomView的布局中加入腾讯云点播的播放控件com.tencent.rtmp.ui.TXCloudVideoView；

  七、在JS端封装原生模块、原生UI，然后写一个页面进行测试。

源代码如下：

MainActivity.java

package com.yb;

import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import com.facebook.react.ReactActivity;

import org.greenrobot.eventbus.EventBus;
import org.greenrobot.eventbus.Subscribe;
import org.greenrobot.eventbus.ThreadMode;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component