一: 介绍
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 获取方法
- // mediaPlay.h
- #import <Foundation/Foundation.h>
- #import <React/RCTBridgeModule.h>
- #import <UIKit/UIKit.h>
- @interface mediaPlay : NSObject<RCTBridgeModule>
- @end
- // mediaPlay.m
- #import "mediaPlay.h"
- @implementation mediaPlay
- RCT_EXPORT_MODULE(MediaPlay);
- @end
- // mediaPlay.m
- #import "mediaPlay.h"
- #import <React/RCTUtils.h>
- @implementation mediaPlay
- RCT_EXPORT_MODULE(MediaPlay);
- @end
- // 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
- -(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;
- }
- // 创建一个视频播放图层
- AVPlayerLayer * playLayer = [AVPlayerLayer playerLayerWithPlayer:player];
- // 将视频播放图层添加到父控件图层
- [_playerVC.view.layer addSublayer:playLayer];
- // 设置视频播放控制器的播放器为 player
- _playerVC.player = player;
- 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));
- });
来源: https://juejin.im/post/5c73fd73e51d45452b6ad6fd