reactnative实战系列教程之自定义原生ui组件

《reactnative实战系列教程之自定义原生ui组件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、reactnative实战系列教程之自定义原生UI组件原生UI组件之VideoView视频播放器开发ReactNative并没有给我们提供VideoView这个组件，那我们要播放视频的话，有两种方法：一种是借助WebView，一种就是使用原生的播放器。这里我们就介绍下，如何使用原生VideoView，封装成一个组件，提供给JS使用。实现JAVA端的组件开发View组件，需要Manager和Package。新建VideoViewManager类，并继承SimpleViewManager，SimpleViewMa

2、nager类需要传入一个泛型，该泛型继承Android的View，也就是说该泛型是要使用android平台的哪个View就传入该View，比如，我要使用android的VideoView，这个泛型就传入VideoView。publicclassVideoViewManagerextendsSimpleViewManager{@OverridepublicStringgetName(){//组件名称return"VideoView";}@OverrideprotectedVideoView

3、createViewInstance(ThemedReactContextreactContext){VideoViewvideo=newVideoView(reactContext);returnvideo;}}getName返回组件名称（可以加前缀RCT），createViewInstance方法返回实例对象，可以在初始化对象时设置一些属性。接着，我们需要让该组件提供视频的url地址。我们可以通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法。该方法有两个参数，第一个参数

4、是泛型View的实例对象，第二个参数是要设置的属性值。方法的返回值类型必须为void，而且访问控制必须被声明为public。组件的每一个属性的设置都会调用Java层被对应ReactProp注解的方法。如下给VideoView提供source的属性设置：@ReactProp(name="source")publicvoidsetSource(RCTVideoViewvideoView,@NullableStringsource){if(source!=null){videoView.setVideoURI(Ur

5、i.parse(source));videoView.start();}}@ReactProp注解必须包含一个字符串类型的参数name。这个参数指定了对应属性在JavaScript端的名字。那么现在JS端可以这么设置source属性值但是在设置播放地址的时候，我们可能需要同时设置header（为什么不能像上面source一样来提供一个方法setHeader呢

6、？思考一下），现在改造一下setSource方法@ReactProp(name="source")publicvoidsetSource(VideoViewvideoView,@NullableReadableMapsource){if(source!=null){if(source.hasKey("url")){Stringurl=source.getString("url");FLog.e(VideoViewManager.class,"url="+url);HashMaph

7、eaderMap=newHashMap<>();if(source.hasKey("headers")){ReadableMapheaders=source.getMap("headers");ReadableMapKeySetIteratoriter=headers.keySetIterator();while(iter.hasNextKey()){Stringkey=iter.nextKey();Stringvalue=headers.getString(key);FLog.e(VideoViewMana

8、ger.class,key+"="+value);headerMap.put(key,value);}}if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP){videoView.setVideoURI(Uri.parse(url),headerMap);}else{try{MethodsetVideoURIMethod=videoView.g