《reactnative实战系列教程之自定义原生u组件》由会员分享，可在线阅读，更多相关《reactnative实战系列教程之自定义原生u组件（28页珍藏版）》请在金锄头文库上搜索。
1、react native 实战系列教程之自定义原生UI组件原生UI组件之VideoView视频播放器开发React Native并没有给我们提供VideoView这个组件，那我们要播放视频的话，有两种方法：一种是借助WebView，一种就是使用原生的播放器。这里我们就介绍下，如何使用原生VideoView，封装成一个组件，提供给JS使用。实现JAVA端的组件开发View组件，需要Manager和Package。新建VideoViewManager类，并继承SimpleViewManager，SimpleViewManager类需要传入一个泛型，该泛型继承Android的View，也就是说该泛型
2、是要使用android 平台的哪个View就传入该View，比如，我要使用android的VideoView，这个泛型就传入VideoView。public class VideoViewManager extends SimpleViewManager Override public String getName() /组件名称 return VideoView; Override protected VideoView createViewInstance(ThemedReactContext reactContext) VideoView video = new VideoView(re
3、actContext); return video; getName返回组件名称（可以加前缀RCT），createViewInstance方法返回实例对象，可以在初始化对象时设置一些属性。接着，我们需要让该组件提供视频的url地址。我们可以通过ReactProp（或ReactPropGroup）注解来导出属性的设置方法。该方法有两个参数，第一个参数是泛型View的实例对象，第二个参数是要设置的属性值。方法的返回值类型必须为void，而且访问控制必须被声明为public。组件的每一个属性的设置都会调用Java层被对应ReactProp注解的方法。 如下给VideoView提供source的属性设
4、置：ReactProp(name = source)public void setSource(RCTVideoView videoView,Nullable String source) if(source != null) videoView.setVideoURI(Uri.parse(source); videoView.start(); ReactProp注解必须包含一个字符串类型的参数name。这个参数指定了对应属性在JavaScript端的名字。那么现在JS端可以这么设置source属性值但是在设置播放地址的时候，我们可能需要同时设置header（为什么不能像上面source一样来
5、提供一个方法setHeader呢？思考一下），现在改造一下setSource方法ReactProp(name = source)public void setSource(VideoView videoView,Nullable ReadableMap source) if(source != null) if (source.hasKey(url) String url = source.getString(url); FLog.e(VideoViewManager.class,url = +url); HashMap headerMap = new HashMap(); if (sourc
6、e.hasKey(headers) ReadableMap headers = source.getMap(headers); ReadableMapKeySetIterator iter = headers.keySetIterator(); while (iter.hasNextKey() String key = iter.nextKey(); String value = headers.getString(key); FLog.e(VideoViewManager.class,key+ = +value); headerMap.put(key,value); if (Build.VE
7、RSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) videoView.setVideoURI(Uri.parse(url),headerMap); else try Method setVideoURIMethod = videoView.getClass().getMethod(setVideoURI, Uri.class, Map.class); setVideoURIMethod.invoke(videoView, Uri.parse(url), headerMap); catch (Exception e) e.printStackTrace(
8、); videoView.start(); setSource的第二个参数变为ReadableMap，这是一个键值对类型的，用于JS传递参数给JAVA。url必修要有，headers不一定有，现在JS端可能变这样：可以发现不同的参数类型，在JS端使用的个中差异。JavaScript所得知的属性类型会由方法的第二个参数的类型来自动决定。支持的类型有：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap。当前阶段VideoViewManager类的完整代码如下public class Vi
9、deoViewManager extends SimpleViewManager Override public String getName() return VideoView; Override protected VideoView createViewInstance(ThemedReactContext reactContext) VideoView video = new VideoView(reactContext); return video; Override public void onDropViewInstance(VideoView view) /对象销毁时 sup
10、er.onDropViewInstance(view); view.stopPlayback();/停止播放 ReactProp(name = source) public void setSource(VideoView videoView,Nullable ReadableMap source) if(source != null) if (source.hasKey(url) String url = source.getString(url); System.out.println(url = +url); HashMap headerMap = new HashMap(); if (
11、source.hasKey(headers) ReadableMap headers = source.getMap(headers); ReadableMapKeySetIterator iter = headers.keySetIterator(); while (iter.hasNextKey() String key = iter.nextKey(); headerMap.put(key, headers.getString(key); if (Build.VERSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) videoView.setVideoURI(Uri.parse(url),headerMap); else try Method setVideoURIMethod = videoView.getClass().getMethod(setVideoURI, Uri.class, Map.class); setVideoUR
