码迷,mamicode.com
首页 > Windows程序 > 详细

Expo大作战(二十六)--expo sdk api之Video和WebBrowser

时间:2018-03-18 14:53:03      阅读:560      评论:0      收藏:0      [点我收藏+]

标签:系统   通用   ctp   从零学习   交流群   event   you   无限循环   code   

 

技术分享图片

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981

【之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发

相关文章:

Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xde如何使用

Expo大作战(二)--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app,expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式,expo中exp命令行工具,expo中如何查看日志log,expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link,对link这块东西没有详细看,大家可以来和我交流

更多>>

写在二十三章以后的话,之前的翻译,不管如何,好与不好,终究是告一段落,也把expo基础理论的东西又深入的理解了一遍,后续expo大作战系列将主要介绍expo sdk的api。


网页浏览器(WebBrowser)

提供对系统Web浏览器的访问并支持处理重定向。 在iOS上,它使用SFSafariViewController或SFAuthenticationSession,具体取决于您调用的方法,并且在Android上使用ChromeCustomTabs。 从iOS 11开始,SFSafariViewController不再与Safari共享cookie,因此如果您使用WebBrowser进行身份验证,您将希望使用WebBrowser.openAuthSessionAsync,并且如果您只想打开一个网页(例如您的应用隐私策略),那么 使用WebBrowser.openBrowserAsync。

处理来自WebBrowser的深层链接


如果您正在使用WebBrowser窗口进行身份验证,或者希望通过深层链接将信息传回您的应用的其他用例,请务必在打开浏览器之前添加一个带有Linking.addEventListener的处理程序。当侦听器触发时,您应该调用WebBrowser.dismissBrowser() - 在处理深度链接时它不会自动关闭。除此之外,WebBrowser的重定向与其他深层链接的工作方式相同。在链接指南中了解更多关于它的信息。

Expo.WebBrowser

Expo.WebBrowser.openBrowserAsync(URL)

在iOS上使用SFSafariViewController和Chrome在Android上的新自定义选项卡中以iOS模式打开网址。在iOS上,模态(modal)Safari不会与系统Safari共享Cookie。如果你需要这个,使用WebBrowser.openAuthSessionAsync。

参数

  • url(字符串) - 在Web浏览器中打开的URL。

返回

返回一个承诺(Promise):

  • 如果用户关闭了Web浏览器,则Promise使用{type:‘cancel‘}进行解析。
  • 如果浏览器使用Expo.WebBrowser.dismissBrowser()关闭,则Promise使用{type:‘dismissed‘}解决。

Expo.WebBrowser.openAuthSessionAsync(url,redirectUrl)

在iOS上使用SFAuthenticationSession以及在Android上使用Chrome浏览器

的新自定义选项卡中以iOS模式打开网址。在iOS上,将询问用户是否允许应用使用给定的URL进行认证。

参数

  • url(字符串) - 在Web浏览器中打开的URL。这应该是一个登录页面。
  • redirectUrl(字符串) - 可选:将URL深层链接回您的应用。默认情况下,这将是Expo.Constants.linkingUrl

返回一个承诺(promise):

  1. 如果用户不允许应用程序使用给定的URL进行身份验证,则Promise使用{type:‘cancel‘}解决。
  2. 如果用户关闭了Web浏览器,则Promise使用{type:‘cancel‘}进行解析。
  3. 如果浏览器使用Expo.WebBrowser.dismissBrowser()关闭,则Promise使用{type:‘dismissed‘}解决。

Expo.WebBrowser.dismissBrowser()

取消系统提供的网络浏览器。

返回

该承诺以{type:‘dismissed‘}解决。

 

视频(Video)

与您的应用中的其他React Native UI元素内嵌显示视频的组件。 屏幕上的视频显示尺寸和位置可以使用通常的React Native样式进行设置。

大多数视频和音频都有AV文档中记录的通用API。 本页面涵盖特定于视频的道具和API。 我们鼓励您浏览本文档以获得基本的视频工作,然后转到AV文档以获取更多高级功能。 视频的音频体验(例如是否中断已在另一个应用中播放的音乐,或者在手机处于静音模式时是否播放声音)可以使用Audio API进行自定义。

以下是一个自动播放和循环视频的简单示例。

<Video
  source={{ uri: http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4 }}
  rate={1.0}
  volume={1.0}
  isMuted={false}
  resizeMode="cover"
  shouldPlay
  isLooping
  style={{ width: 300, height: 300 }}
/>

有关更高级的示例,请查看播放列表示例以及包装(wraps )<video>的自定义视频播放器控制组件,添加自定义控件并广泛使用<video> API。 这款应用程序使用了videoplayer控件。

Expo.Video

属性(props)

Source和posterSource属性定制视频内容的来源。

  • 资源(source)

要显示的视频数据的来源。如果此属性为空或留空,则视频组件将不显示任何内容。

请注意,这也可以通过loadAsync()在ref上设置。请参阅下文或AV文档以获取更多信息。

          支持源代码的以下表单:(The following forms for the source are supported:)

  • 形式为{uri:‘http:// path / to / file‘}的字典,其中网址指向网络上的视频文件。
  • 对源代码目录中的视频文件资源require(‘path / to / file‘)。
  • 用于视频文件资产的Expo.Asset对象。

iOS开发人员文档列出了iOS支持的视频格式。

Android开发者文档列出了Android支持的视频格式。

  • posterSource

加载时在视频上显示的可选图像的来源。支持以下形式:

    •   形式为{uri:‘http:// path / to / file‘}的字典,其中包含指向网络上图片文件的网址。
    •   对源代码目录中的图像文件资源require(‘path / to / file‘)。

useNativeControls,resizeMode和usePoster属性自定义组件的UI。

useNativeControls

如果设置为true,则会在视频组件中显示原生播放控件(如播放和暂停)。如果您更喜欢使用自定义控件,则可以自己编写它们,查看Videoplayer组件

resizeMode

描述应如何缩放视频以在组件视图边界中显示的字符串。必须是以下值之一:

Expo.Video.RESIZE_MODE_STRETCH - 拉伸以填充组件边界。

Expo.Video.RESIZE_MODE_CONTAIN - 适应组件边界,同时保留宽高比。

Expo.Video.RESIZE_MODE_COVER - 填充组件边界,同时保留宽高比。

usePoster

一个布尔值,如果设置为true,则会在加载视频时显示图像(其源是通过prop posterSource设置的)。

onPlaybackStatusUpdate,onReadyForDisplay和onIOSFullscreenUpdate props传递Video组件状态的信息。 onLoadStart,onLoad和onError props也提供向后兼容图像(但它们与onPlaybackStatusUpdate冗余)。

onPlaybackStatusUpdate

通过视频的PlaybackStatus定期调用的函数。你可能会使用这个很多。有关onPlaybackStatusUpdate的更多信息以及调用时间间隔,请参阅AV文档

onReadyForDisplay

视频准备好显示时调用的函数。请注意,只要视频的自然尺寸发生变化,就会调用此函数。

函数传递一个包含以下键值对的字典:

naturalSize:包含以下键值对的字典:

  • width:描述视频数据的宽度(以像素为单位)的数字
  • height:描述视频数据像素高度的数字
  • orientation:描述视频数据自然方向的字符串,可以是“portrait(纵向)”或“landscape(横向)”

status:视频的PlaybackStatus;请参阅AV文档以获取更多信息

onFullscreenUpdate

在本机iOS全屏视图的状态发生变化时调用的函数(通过Video的ref上的presentFullscreenPlayer()和dismissFullscreenPlayer()方法控制)。

函数传递一个包含以下键值对的字典:

fullscreenUpdate:采用下列其中一个值的数字:

  • Expo.Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT:描述全屏播放器即将呈现
  • Expo.Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT:描述全屏播放器刚完成呈现
  • Expo.Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS:描述全屏播放器即将dismiss
  • Expo.Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS:描述全屏播放器刚完成dismiss

status:视频的PlaybackStatus;请参阅AV文档以获取更多信息。

onLoadStart

视频开始加载到内存时调用的函数。无需任何参数调用。

onLoad

一旦加载了视频,就会调用该函数。数据流式传输,所有数据可能还没有被提取,只是足够渲染第一帧。该函数以视频的PlaybackStatus作为参数被调用;请参阅AV文档以获取更多信息。

onError

如果加载或播放遇到致命错误,则会调用该函数。该函数传递一个错误消息字符串作为参数。在传递到onPlaybackStatusUpdate回调函数的playbackStatus.error中也会设置发送错误。

最后,下列道具可用于控制视频的播放,但我们建议您使用参考文献(下文和AV文档中介绍的)上提供的方法进行更好的控制。

status

字典在视频上设置新的PlaybackStatusToSet。有关PlaybackStatusToSet的更多信息,请参阅AV文档。

progressUpdateIntervalMillis

描述onPlaybackStatusUpdate调用之间的新毫秒最小时间间隔的数字。有关更多信息,请参阅AV文档。

positionMillis

播放的理想位置,以毫秒为单位。有关更多信息,请参阅AV文档。

shouldPlay

描述媒体是否应该播放的布尔值。由于缓冲等原因设置此值后,播放可能无法立即开始。确保根据PlaybackStatus的isPlaying和isBuffering属性更新您的UI。有关更多信息,请参阅AV文档。

rate

媒体所需的播放速率。该值必须介于0.0和32.0之间。仅适用于Android API版本23及更高版本和iOS。有关更多信息,请参阅AV文档。

shouldCorrectPitch

一个布尔值,描述我们是否应该修改变化率的音调。如果设置为true,音频的音高将被校正(所以不同于1.0的速率会延长音频的时间)。有关更多信息,请参阅AV文档。

volume

此媒体的音频所需的音量。此值必须介于0.0(静音)和1.0(最大音量)之间。有关更多信息,请参阅AV文档。

isMuted

描述该媒体的音频是否应该静音的布尔值。有关更多信息,请参阅AV文档。

isLooping

一个布尔值,用于描述媒体是否应播放一次(false)或无限循环(true)。有关更多信息,请参阅AV文档。

该组件的ref中提供了以下方法:

videoRef.presentFullscreenPlayer()

这会在应用的用户界面上呈现视频组件的全屏视图。请注意,即使useNativeControls设置为false,本地控件也将在全屏模式下可见。

return

一旦全屏播放器完成播放,视频的PlaybackStatus即可满足该承诺,或者在出现错误时拒绝,或者在Android设备上调用此播放器。

videoRef.dismissFullscreenPlayer()

这消除了全屏视频视图。

return

一旦全屏播放器完成解散,或者如果出现错误,或者如果在Android设备上调用该视频,该视频的PlaybackStatus就会满足该Promise。

视频组件ref上的其余API与Expo.Audio.Sound的API相同 - 请参阅AV文档以获取更多信息

  • videoRef.loadAsync(source, initialStatus = {}, downloadFirst = true)

  • videoRef.unloadAsync()

  • videoRef.getStatusAsync()

  • videoRef.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate)

  • videoRef.setStatusAsync(statusToSet)

  • videoRef.playAsync()

  • videoRef.replayAsync()

  • videoRef.pauseAsync()

  • videoRef.stopAsync()

  • videoRef.setPositionAsync(millis)

  • videoRef.setRateAsync(value, shouldCorrectPitch)

  • videoRef.setVolumeAsync(value)

  • videoRef.setIsMutedAsync(value)

  • videoRef.setIsLoopingAsync(value)

  • videoRef.setProgressUpdateIntervalAsync(millis)


下一张继续介绍,这一篇主要介绍了:expo sdk api之Video和WebBrowser欢迎大家关注我的微信公众号,这篇文章是否被大家认可,我的衡量标准就是公众号粉丝增长人数。欢迎大家转载,但必须保留本人博客链接!

 

技术分享图片

Expo大作战(二十六)--expo sdk api之Video和WebBrowser

标签:系统   通用   ctp   从零学习   交流群   event   you   无限循环   code   

原文地址:https://www.cnblogs.com/gdsblog/p/8595206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!