react-native绑定优酷SDK-附效果图和源码

2017-10-25 720

ReactNative绑定优酷SDK需要用到两部分知识：

优酷本身的sdk绑定；
RN与原生界面的交互；

效果：

RN版本：0.49.3

代码更新日期：2017.10.26

下文也根据绑定需要分为两部分：

　　一、优酷sdk绑定；

　　二、RN与原生页面的交互；

一、优酷SDK绑定

1.优酷云平台创建应用，获取到client_id和client_secret；

　　申请地址：http://cloud.youku.com/app

　　如图：

2.引入sdk：

在目录app/libs加入优酷sdk：mma_sdk.jar、utdid4all-1.1.5.5.jar、YoukuPlayerOpenSDK-release.aar，sdk下载地址：http://cloud.youku.com/down/play

在目录app/build.gradle里面添加下面两段配置：

android {
    // ... 之前本身配置，下面为添加的配置
    //添加libs目录配置
    repositories {
        flatDir {
            dirs 'libs'
        }
    }
    sourceSets {
        main {
            jniLibs.srcDirs = ['libs'];
        }
    }

}

dependencies {
    // ... 之前本身配置，下面为添加的配置
    //公共库
    compile 'com.alibaba:fastjson:1.1.56.android'
    compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
    //sdk
    compile(name: 'YoukuPlayerOpenSDK-release', ext: 'aar')
}

3.在MainApplication.java初始化优酷播放代码：

import com.youku.cloud.player.YoukuPlayerConfig;  

  //请在这里输入你的应用的clientId，clientSecret
  public static final String CLIENT_ID_WITH_AD = "e7e4d0ee1591b0bf";
  public static final String CLIENT_SECRET_WITH_AD = "1fbf633f8a55fa1bfabf95729d8e259a";

@Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    YoukuPlayerConfig.setClientIdAndSecret(CLIENT_ID_WITH_AD,CLIENT_SECRET_WITH_AD);
    YoukuPlayerConfig.onInitial(this);
    YoukuPlayerConfig.setLog(false);
  }

4.新建Activity和后置类；

页面代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gangguwang.yewugo.YKPlayerActivity"
    android:orientation="vertical">

    <com.youku.cloud.player.YoukuPlayerView
        android:id="@+id/baseview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >
    </com.youku.cloud.player.YoukuPlayerView>
    
</LinearLayout>

后置类代码：

package com.gangguwang.yewugo;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.text.TextUtils;

import com.youku.cloud.player.YoukuPlayerConfig;
import com.youku.cloud.player.YoukuPlayerView;
import com.youku.cloud.utils.Logger;
import com.youku.cloud.module.PlayerErrorInfo;
import com.youku.cloud.player.PlayerListener;
import com.youku.cloud.player.VideoDefinition;
import com.youku.cloud.utils.ValidateUtil;
import com.youku.download.DownInfo;


public class NativeActivity extends AppCompatActivity {

    private YoukuPlayerView youkuPlayerView;
    private String vid="XMzA1NzYwMTQxNg==";
    private String password="";
    private boolean local = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_native);
        // Intent mIntent=getIntent();
        // if(mIntent!=null) {
        //     Toast.makeText(this,"请求参数："+mIntent.getStringExtra("params"),Toast.LENGTH_SHORT).show();;
        // }
        // Button btn_two=(Button)this.findViewById(R.id.btn_two);
        // //btn_two.setVisibility(View.GONE); //隐藏按钮
        // btn_two.setOnClickListener(new View.OnClickListener() {
        //     @Override
        //     public void onClick(View v) {
        //         Intent mIntent=new Intent(NativeActivity.this,MainActivity.class);
        //         mIntent.putExtra("data","你是123...");
        //         NativeActivity.this.startActivity(mIntent);
        //         NativeActivity.this.finish();
        //     }
        // });
        youkuPlayerView = (YoukuPlayerView)findViewById(R.id.baseview);
        // 初始化播放器
        youkuPlayerView.attachActivity(this);
        youkuPlayerView.setPreferVideoDefinition(VideoDefinition.VIDEO_HD);
        youkuPlayerView.setPlayerListener(new MyPlayerListener());
        youkuPlayerView.setShowFullBtn(true);
        autoplayvideo();
    }

    private void autoplayvideo() {
        if (local) {
            youkuPlayerView.playLocalVideo(vid);
        } else {
            if (TextUtils.isEmpty(password)) {
                youkuPlayerView.playYoukuVideo(vid);
            } else {
                youkuPlayerView.playYoukuPrivateVideo(vid, password);
            }
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        // 必须重写的onPause()
        youkuPlayerView.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        // 必须重写的onResume()
        youkuPlayerView.onResume();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 必须重写的onDestroy()
        youkuPlayerView.onDestroy();
    }

    // 添加播放器的监听器
    private class MyPlayerListener extends PlayerListener {
        @Override
        public void onComplete() {
            // TODO Auto-generated method stub
            super.onComplete();
        }

        @Override
        public void onError(int code, PlayerErrorInfo info) {
            // TODO Auto-generated method stub
            //txt1.setText(info.getDesc());
        }

        @Override
        public void OnCurrentPositionChanged(int msec) {
            // TODO Auto-generated method stub
            super.OnCurrentPositionChanged(msec);
        }

        @Override
        public void onVideoNeedPassword(int code) {
            // TODO Auto-generated method stub
            super.onVideoNeedPassword(code);
        }

        @Override
        public void onVideoSizeChanged(int width, int height) {
            // TODO Auto-generated method stub
            super.onVideoSizeChanged(width, height);
        }
    }

}

5.配置AndroidManifest.xml

5.1：给你的播放器Activity加上监听屏幕旋转的语句

<activity android:name=".NativeActivity" 
    android:configChanges="orientation|keyboard|keyboardHidden|screenSize|screenLayout|uiMode"
    android:exported="true"
    android:launchMode="singleTask" />

5.2：添加权限

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE" />
<uses-permission android:name="android.permission.INTERACT_ACROSS_USERS_FULL" />

到此，优酷播放的sdk已经配置完毕。

二、RN与原生页面的互交

使用NativeModules模块互交，本章分为：

　　1.RN调用；

　　2.创建中间交互类IntentModule.java、IntentReactPackage.java;

　　3.使用反射和Intent进行通知原生界面；

1.RN调用代码：

<Button
    onPress={() => {
        NativeModules.IntentModule.startActivityFromJS('你的包名.NativeActivity', '参数');
    }}
    title="  播 放  "
    color="#841584"
/>

2.创建中间交互类

a).注册原生模块类 IntentReactPackage.java 代码如下：

package com.gangguwang.yewugo;

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 IntentReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new IntentModule(reactContext)
        );
    }
    // @Override
    // public List<Class<? extends JavaScriptModule>> createJSModules() {
    //     return Collections.emptyList();
    // }

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

代码解读：固定的api固定的方法必须重写createNativeModules和createViewManagers方法，只是把另一个交互类IntentModule注册到createNativeModules里面。

b).创建你的RN交互暴露方法类 IntentModule.java，代码如下：

package com.gangguwang.yewugo;

import android.app.Activity;
import android.content.Intent;
import android.text.TextUtils;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;


public class IntentModule  extends ReactContextBaseJavaModule {

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

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

    /**
     * Activtiy跳转到JS页面，传输数据
     * @param successBack
     * @param errorBack
     */
    @ReactMethod
    public void dataToJS(Callback successBack, Callback errorBack){
        try{
            Activity currentActivity = getCurrentActivity();
            String result = currentActivity.getIntent().getStringExtra("data");
            if (TextUtils.isEmpty(result)){
                result = "没有数据";
            }
            successBack.invoke(result);
        }catch (Exception e){
            errorBack.invoke(e.getMessage());
        }
    }
    /**
     * 从JS页面跳转到原生activity   同时也可以从JS传递相关数据到原生
     * @param className
     * @param params
     */
    @ReactMethod
    public void startActivityFromJS(String className, String params){
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class toActivity = Class.forName(className);
                Intent intent = new Intent(currentActivity,toActivity);
                //intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                intent.putExtra("params", params);
                currentActivity.startActivity(intent);
            }

        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException("不能打开Activity : "+e.getMessage());
        }
    }

    /**
     * 从JS页面跳转到Activity界面，并且等待从Activity返回的数据给JS
     * @param className
     * @param params
     * @param requestCode
     * @param successBack
     * @param errorBack
     */
    @ReactMethod
    public void startActivityFromJSGetResult(String className, String params, int requestCode, Callback successBack, Callback errorBack){
        try {
            Activity currentActivity = getCurrentActivity();
            if(currentActivity != null) {
                Class toActivity = Class.forName(className);
                Intent intent = new Intent(currentActivity,toActivity);
                //intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                intent.putExtra("params", params);
                currentActivity.startActivityForResult(intent,requestCode);
                // //进行回调数据
                // successBack.invoke(MainActivity.mQueue.take());
            }
        } catch (Exception e) {
            errorBack.invoke(e.getMessage());
            e.printStackTrace();
        }
    }

    // /**
    //  * 必须添加反射注解不然会报错
    //  * 这个方法就是ReactNative将要调用的方法，会通过此类名字调用
    //  * @param msg
    //  */
    // @ReactMethod
    // public void callNativeMethod(String msg) {
    //     Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
    //     //startActivityForResult(myIntent, 1);
    // }

}

c).在MainApplication.java里面设置交互类IntentReactPackage

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

3.使用反射和Intent进行通知原生界面；

在IntentModule已经体现了，核心代码：

Activity currentActivity = getCurrentActivity();
if(null!=currentActivity){
    Class toActivity = Class.forName(className);
    Intent intent = new Intent(currentActivity,toActivity);
    intent.putExtra("params", params);
    currentActivity.startActivity(intent);
}

到此为止已经全部大功告成！源码地址：https://github.com/vipstone/react-native-youku

如果本文对你有所帮助，请打赏——1元就足够感动我：）

联系邮箱：intdb@qq.com
我的GitHub： https://github.com/vipstone

关注公众号：

作者：王磊
出处： http://vipstone.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，请标明出处。

微信关注我们

原文链接：https://yq.aliyun.com/articles/629903

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

[Android Studio] 使用本地 aar 文件

导出aar 首先Android Library项目的gradle脚本只需要在开头声明 apply plugin: 'com.android.library' 之后就和导出apk文件一样的方法，执行./gradlew assembleRelease，然后就可以在build/outputs/aar文件夹里生成aar文件引用本地的aar 1: 确保你的 aar文件中没有和现有工程重复的res，包括图片名字，如ic-launcher, string , dimen等，一旦主工程引用了该重复的资源名称，就会报错。 2: in build.gradle apply plugin: 'com.android.application' android { compileSdkVersion 22 buildToolsVersion "22.0.1" defaultConfig { applicationId "xxxxxxxxxxx" minSdkVersion 22 targetSdkVersion 22 versionCode 1 versionName "1.0" } buildTypes {...

2017-10-26

617

【Android开发坑系列】之事件

总结一下： 1.Touch事件分发中只有两个主角: ViewGroup和View。 ViewGroup包含onInterceptTouchEvent、dispatchTouchEvent、onTouchEvent三个相关事件。View包含dispatchTouchEvent、onTouchEvent两个相关事件。其中ViewGroup又继承于View。 2.触摸事件由Action_Down、Action_Move、Aciton_UP组成，其中一次完整的触摸事件中，Down和Up都只有最多一个，Move有若干个，可以为0个。定律：当dispatchTouchEvent在进行事件分发的时候，只有前一个action返回被处理（消费）掉，才会触发后一个action。 3.事件传递的两种方式：隧道方式：从根元素依次往下传递直到最内层子元素或在中间某一元素中由于某一条件停止传递；冒泡方式：从最内层子元素依次往外传递直到根元素或在中间某一元素中由于某一条件停止传递。 dispatchTouchEvent是隧道方式，onTouchEvent是冒泡方式（若返回true，则上层不再处理）。 4.onInt...

2017-10-26

630

发表评论

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。