net做公司网站,国外设计师,保定网站seo,优秀简洁网站设计ReactNative绑定优酷SDK需要用到两部分知识#xff1a; 优酷本身的sdk绑定#xff1b;RN与原生界面的交互#xff1b; 效果#xff1a; RN版本#xff1a;0.49.3 代码更新日期#xff1a;2017.10.26 下文也根据绑定需要分为两部分#xff1a; 一、优酷sdk绑定#…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加入优酷sdkmma_sdk.jar、utdid4all-1.1.5.5.jar、YoukuPlayerOpenSDK-release.aarsdk下载地址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; //请在这里输入你的应用的clientIdclientSecret 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 version1.0 encodingutf-8? LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto xmlns:toolshttp://schemas.android.com/tools android:layout_widthmatch_parent android:layout_heightmatch_parent tools:contextcom.gangguwang.yewugo.YKPlayerActivity android:orientationvertical com.youku.cloud.player.YoukuPlayerView android:idid/baseview android:layout_widthfill_parent android:layout_heightwrap_content android:layout_alignParentToptrue /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 vidXMzA1NzYwMTQxNg; private String password; private boolean local false; Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_native); // Intent mIntentgetIntent(); // 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 mIntentnew 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:configChangesorientation|keyboard|keyboardHidden|screenSize|screenLayout|uiMode android:exportedtrue android:launchModesingleTask / 5.2添加权限 uses-permission android:nameandroid.permission.ACCESS_NETWORK_STATE / uses-permission android:nameandroid.permission.ACCESS_WIFI_STATE / uses-permission android:nameandroid.permission.INTERNET / uses-permission android:nameandroid.permission.READ_PHONE_STATE / uses-permission android:nameandroid.permission.WRITE_EXTERNAL_STORAGE / uses-permission android:nameandroid.permission.READ_EXTERNAL_STORAGE / uses-permission android:nameandroid.permission.WAKE_LOCK / uses-permission android:namecom.android.launcher.permission.READ_SETTINGS / uses-permission android:nameandroid.permission.SYSTEM_ALERT_WINDOW / uses-permission android:nameandroid.permission.CHANGE_WIFI_MULTICAST_STATE / uses-permission android:nameandroid.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 ListNativeModule createNativeModules(ReactApplicationContext reactContext) { return Arrays.NativeModuleasList( new IntentModule(reactContext) ); } // Override // public ListClass? extends JavaScriptModule createJSModules() { // return Collections.emptyList(); // } Override public ListViewManager 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 ListReactPackage getPackages() { return Arrays.ReactPackageasList( 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