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

来源:https://www.cnblogs.com/gdsblog/archive/2018/03/18/8595206.html
-Advertisement-
Play Games

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...


 

簡要：本系列文章講會對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，歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MongoDB的基本操作：服務端啟動，客戶端連接，CRUD操作
    本文內容： MongoDB的介紹 MongoDB服務端的啟動 MongoDB客戶端連接 SQL與MongoDB相關概念解釋 什麼是BSON 資料庫操作 集合操作 文檔操作 測試環境：win10 軟體版本:3.6.2 首發時間：2018-03-18 15:38 MongoDB的介紹： MongoDB ...
  • 【讀書筆記】iOS-方法聲明
    編譯的時候 ，編譯器會把方法前面的IBAction替換成void,把屬性前面的IBOutlet移除掉，因為這些都 只是Interface Builder的標誌而已。這個IBAction方法會被UI控制項的相應事件引發，並傳入這個UI控制項作為參數，因為我們指定傳入的參數是id類型的，所以可以傳入任意類型 ...
  • Android Studio筆記之快捷鍵
    閱讀目錄 常用 搜索、導航 編寫代碼 重構 一、常用 代碼保存 描述：該操作可以用於在書寫代碼的過程中進行快速保存 調用：菜單欄 File -> Save All 快捷鍵：Ctrl + S 最大化/最小化代碼編輯視窗 描述：隱藏所有工具視窗，代碼編輯視窗會最大化/最小化 調用：菜單欄 Window ...
  • Expo大作戰(二十九)--expo sdk api之registerRootComponent（註冊跟組件）,ScreenOrientation(屏幕切換)，SecureStore，
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • Android開發——簽名包的生成
    前言： 最近想要在酷安網上傳apk，註冊開發者的時候需要申請驗證，驗證需要兩個apk，一個是自己的apk（需要簽名），另外一個則是下載酷安的模板生成的一個簽名包（使用的簽名要與之前的簽名自己的apk一樣），在簽名包的生成之中，gradle報了幾條錯誤，之後經過漫長的百度，總算是完美解決，便是把這個記 ...
  • Android編輯信息界面，組合控制項的封裝
    Github地址（完整Demo，歡迎下載） https://github.com/ganchuanpu/ItemGroup 效果圖 attrs.xml 獲取到各屬性 xml佈局文件 調用的activity ...
  • Expo大作戰(二十八)--expo sdk api之Speach（語音文字轉換），Segment
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
  • Expo大作戰(二十七)--expo sdk api之Util(expo自帶工具類)，tackSnapshotAsync，Svg，SQLite
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類