react native 实战系列教程之自定义原生UI组件.docVIP

react native 实战系列教程之自定义原生UI组件 原生UI组件之VideoView视频播放器开发 React Native并没有给我们提供VideoView这个组件，那我们要播放视频的话，有两种方法：一种是借助WebView，一种就是使用原生的播放器。这里我们就介绍下，如何使用原生VideoView，封装成一个组件，提供给JS使用。 实现JAVA端的组件 开发View组件，需要Manager和Package。 新建VideoViewManager类，并继承SimpleViewManager，SimpleViewManager类需要传入一个泛型，该泛型继承Android的View，也就是说该泛型是要使用android 平台的哪个View就传入该View，比如，我要使用android的VideoView，这个泛型就传入VideoView。 public class VideoViewManager extends SimpleViewManagerVideoView{ @Override public String getName() {//组件名称 return VideoView; } @Override protected VideoView createViewInstance(ThemedReactContext reactContext) { VideoView video = new VideoView(reactContext); return video; } } getName返回组件名称（可以加前缀RCT），createViewInstance方法返回实例对象，可以在初始化对象时设置一些属性。 接着，我们需要让该组件提供视频的url地址。 我们可以通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法。该方法有两个参数，第一个参数是泛型View的实例对象，第二个参数是要设置的属性值。方法的返回值类型必须为void，而且访问控制必须被声明为public。组件的每一个属性的设置都会调用Java层被对应ReactProp注解的方法。 如下给VideoView提供source的属性设置： @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属性值 VideoView source=/A14EXG7JQ53PYURP.mp4/ 但是在设置播放地址的时候，我们可能需要同时设置header（为什么不能像上面source一样来提供一个方法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); HashMapString, String headerMap = new HashMap(); if (source.hasKey(headers)) { ReadableMap headers = source.getMap(headers); ReadableMapKeySetIterator iter = headers.keySetIterator(); while (iter.hasNextKey()) { String k