内容简介:React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多其他的插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能,都为IDE开发平台提供封装好的插件,以便项目开发使用。
另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。这篇文章重点介绍原生视频播放器插件的开发与使用。
源码Demo获取方法
如果需要React Native视频播放器插件源码demo,欢迎关注 【网罗开发】微信公众号,回复【63】便可领取。 网罗天下方法,方便你我开发 ,所有文档会持续更新,欢迎关注一起成长!
二:实现思路分析
原生视频播放器插件是需要实现打开js端调用播放方法传入的视频链接URL,具体的实现思路如下:
-
新建mediaPlay类,实现RCTBridgeModule协议
-
添加RCT_EXPORT_MODULE()宏
-
添加React Native跟控制器
-
声明被JavaScript 调用的方法
-
创建一个视频播放控制器
-
创建一个视频播放图层
-
将视频播放图层添加到父控件图层
-
JavaScript调用浏览器方法
三:实现源码分析
1. 新建mediaPlay类,实现RCTBridgeModule协议
新建继承NSObject的mediaPlay类,并实现RCTBridgeModule协议
// mediaPlay.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> #import <UIKit/UIKit.h> @interface mediaPlay : NSObject<RCTBridgeModule> @end 复制代码
2. 添加RCT_EXPORT_MODULE()宏
为了实现RCTBridgeModule协议,mediaPlay的类需要包含RCT_EXPORT_MODULE()宏。 并在这个宏里面添加一个参数“MediaPlay”用来指定在 JavaScript 中访问这个模块的名字。 如果你不指定,默认就会使用这个 Objective-C 类的名字。 如果类名以 RCT 开头,则 JavaScript 端引入的模块名会自动移除这个前缀。
// mediaPlay.m #import "mediaPlay.h" @implementation mediaPlay RCT_EXPORT_MODULE(MediaPlay); @end 复制代码
3. 添加React Native跟控制器
如果不添加React Native跟控制器,view将不能正常显示出来,实现方法如下:
// mediaPlay.m #import "mediaPlay.h" #import <React/RCTUtils.h> @implementation mediaPlay RCT_EXPORT_MODULE(MediaPlay); @end 复制代码
引入<React/RCTUtils.h>之后,在视图初始化或者显示的时候,按照如下方法调用即可
UIViewController *vc = RCTPresentedViewController(); 复制代码
4. 声明被JavaScript 调用的方法
React Native需要明确的声明要给 JavaScript 导出的方法,否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现:
// mediaPlay.m #import "mediaPlay.h" #import <React/RCTUtils.h> @implementation mediaPlay RCT_EXPORT_MODULE(MediaPlay); RCT_EXPORT_METHOD(mediaPlayer:(NSDictionary*)arguments :(RCTResponseSenderBlock)sucessCallback :(RCTResponseSenderBlock)failCallback) { NSLog(@"调起原声视频播放器的方法"); } @end 复制代码
5. 创建一个视频播放控制器
视频播放器是使用iOS原声<AVFoundation/AVFoundation.h>来实现视频的播放,创建一个视频播放控制器代码如下:
-(AVPlayerViewController *)playerVC { if (_playerVC == nil) { //创建一个视频播放控制器 _playerVC = [[AVPlayerViewController alloc] init]; //获取视频URL(远程、本地视频URL都可以) NSURL * url = [NSURL URLWithString:self.vedioURL]; //根据URL创建播放曲目 AVPlayerItem * item = [AVPlayerItem playerItemWithURL:url]; //创建一个视频播放器 AVPlayer * player = [AVPlayer playerWithPlayerItem:item]; } return _playerVC; } 复制代码
6. 创建一个视频播放图层
//创建一个视频播放图层 AVPlayerLayer * playLayer = [AVPlayerLayer playerLayerWithPlayer:player]; 复制代码
7. 将视频播放图层添加到父控件图层
//将视频播放图层添加到父控件图层 [_playerVC.view.layer addSublayer:playLayer]; //设置视频播放控制器的播放器为player _playerVC.player = player; 复制代码
8. Javascript调用浏览器方法
现在从 Javascript 里可以这样调用这个方法:
import { NativeModules } from "react-native"; const MediaPlayPlugin = NativeModules.MediaPlay; MediaPlayPlugin.mediaPlayer({filePath:"http://static.tripbe.com/videofiles/20121214/9533522808.f4v.mp4"},(msg) => { Alert.alert(JSON.stringify(msg)); },(err) => { Alert.alert(JSON.stringify(err)); }); 复制代码
希望可以帮助大家,如有问题可加QQ技术交流群: 668562416
如果哪里有什么不对或者不足的地方,还望读者多多提意见或建议
如需转载请联系我,经过授权方可转载,谢谢
本篇已同步到个人博客:FBY展菲
欢迎关注我的公众号:网罗开发
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Design for ROI
Lance Loveday、Sandra Niehaus / New Riders Press / 2007-10-27 / USD 39.99
Your web site is a business--design it like one. Billions of dollars in spending decisions are influenced by web sites. So why aren't businesses laser-focused on designing their sites to maximize thei......一起来看看 《Web Design for ROI》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
在线进制转换器
各进制数互转换器