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）：
- 如果用戶不允許應用程序使用給定的URL進行身份驗證，則Promise使用{type：‘cancel‘}解決。
- 如果用戶關閉了Web瀏覽器，則Promise使用{type：‘cancel‘}進行解析。
- 如果瀏覽器使用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