今天记录一下我的一个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