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

 

简要：本系列文章讲会对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，欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！