ReactNative 集成 腾讯TBS 进行 文件查看

     近期,在项目中,需要用到腾讯的TBS来进行文件预览功能,由于SDK中给的demo是android原生,我们想要在ReactNative中使用,则需要进行一些工作,现在整理出来。

一.ReactNative 调用原生

1.创建 一个activity 来继承ReactContextBaseJavaModule类

public class RNActivity extends ReactContextBaseJavaModule

具体代码如下:

public class RNActivity extends ReactContextBaseJavaModule{
    private ReactApplicationContext mContext;
    public RNActivity(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext=reactContext;
    }
    @Override
    public String getName() {
        return "RNActivity";
    }

    @ReactMethod
    public void show(String filePath){//ReactNative调用的是这个show方法,filePath为传的值
        //Toast.makeText(mContext, "RNActivity", Toast.LENGTH_SHORT).show();//测试是否调用了此方法
        Activity currentActivity = getCurrentActivity();
        //String filePath = "/storage/emulated/0/test.docx";
        if(null!=currentActivity){
            //Class aimActivity = Class.forName(name);
            FileDisplayActivity.show(currentActivity, filePath);//调用fileDisplayActivity的show方法
            //Intent intent = new Intent(currentActivity,UrlActivity.class);//这一行是跳转到UrlActivity这个//页面
            //currentActivity.startActivity(intent);
        }
    }

 2.创建一个类,实现ReactPackage接口

代码如下:

public class RNPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new RNActivity(reactContext));
        return modules;
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3.在MainApplication中进行如下添加

protected List getPackages() {
  return Arrays.asList(
      new MainReactPackage(),
      new RNPackage() //添加此行
  );
}
@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false);

  //TBS  增加这句话
  QbSdk.initX5Environment(this,null);//初始化x5内核
  QbSdk.setDownloadWithoutWifi(true);//让应用在没有WiFi的情况下,也能加载x5内核
  ExceptionHandler.getInstance().initConfig(this);

}

 4.在APP下新建 lib包,并添加官网SDK中的jar包

5.AndroidManifest.xml 的配置

添加权限





6.在app下的build.gradle 的dependencies

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.facebook.react:react-native:+'
    // From node_modules
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    testCompile 'junit:junit:4.12'
    compile files('libs/tbs_sdk_thirdapp_v4.3.0.1020_43633_sharewithdownload_withoutGame_obfs_20190111_105200.jar')
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'pub.devrel:easypermissions:0.4.3'
    compile 'com.squareup.okio:okio:1.11.0'
    compile 'com.squareup.okhttp3:okhttp:3.5.0'
    compile 'com.squareup.retrofit2:retrofit:2.1.0'
    compile 'com.squareup.retrofit2:converter-gson:2.1.0'
}

7.具体的用TBS实现文件查看功能

public class FileDisplayActivity extends 
AppCompatActivity  //这是import android.support.v7.app.AppCompatActivity;里面的implements EasyPermissions.PermissionCallbacks //这是应用权限的处理

具体demo的代码

你可能感兴趣的:(ReactNative)