前兩天在 Android 端接應(yīng)用內(nèi)截圖功能調(diào)研了一圈最后選了 react-native-view-shot。本以為調(diào)好幾個(gè)參數(shù)就完事結(jié)果從空白截圖、FileUriExposedException一路踩到 Android 13 權(quán)限閃退前前后后折騰了一整天。這篇就把我在 RN Android 下用 react-native-view-shot 遇到的所有問(wèn)題、排查思路和最終能跑的方案完整記下來(lái)。如果你也在做 RN 截圖功能或者正被 content:// 這種 Uri 路徑搞暈這篇文章應(yīng)該能幫你少踩不少坑。這個(gè)需求不挑基礎(chǔ)剛接觸 RN 的新手能避開(kāi)大部分天坑被新老架構(gòu)遷移折磨過(guò)的老手也能在這里找到一些排查線索。1. react-native-view-shot 到底干了什么1.1 它并不是真的“截屏”很多人第一次用 react-native-view-shot會(huì)誤以為它是調(diào)用系統(tǒng)截屏接口把整個(gè)屏幕拍下來(lái)。實(shí)際上完全不是這么回事。它的核心 APIcaptureRef拿到的是你傳入的一個(gè) React View 實(shí)例然后原生端通過(guò) UIManager 拿到這個(gè) View 對(duì)應(yīng)的 Android 原生節(jié)點(diǎn)再?gòu)?fù)用 Android 的View.draw(Canvas)方法把視圖樹(shù)里的普通 View 重新繪制到一張 Bitmap 上最后導(dǎo)出成臨時(shí)文件、base64 或>file:///data/user/0/com.example.app/cache/ReactNative-snapshot-image-xxx.png這個(gè)文件隨時(shí)可能被系統(tǒng)清理所以如果你想把它保存到相冊(cè)或者分享出去還需要再走一步“拷貝到公共目錄”的邏輯。很多新手在這里被file://和content://繞暈其實(shí)本質(zhì)就是 Android 文件共享規(guī)則的問(wèn)題后面第 2 章我會(huì)專門展開(kāi)。1.2 為什么我推薦用 captureRef 而不是 captureScreenreact-native-view-shot 還暴露了一個(gè)captureScreen()方法聽(tīng)名字感覺(jué)可以直接截整個(gè)屏幕省去傳 ref 的麻煩。但我實(shí)際用下來(lái)這個(gè) API 在 Android 上非常不靠譜。它早期實(shí)現(xiàn)依賴 MediaProjection 之類的系統(tǒng)能力需要用戶授權(quán)部分國(guó)產(chǎn) ROM 上還要額外開(kāi)懸浮窗權(quán)限。即便授權(quán)成功在某些機(jī)型上截出來(lái)的也可能是一張黑屏或者只有當(dāng)前 Activity 的窗口狀態(tài)欄、導(dǎo)航欄時(shí)有時(shí)無(wú)。我自己的建議是99% 的應(yīng)用內(nèi)截圖需求都應(yīng)該用captureRef把你要截的內(nèi)容老老實(shí)實(shí)放進(jìn)一個(gè)View里然后對(duì)這個(gè) View 截圖。這樣結(jié)果是可控的不受系統(tǒng)窗口影響也不需要額外權(quán)限。只有那種要截整個(gè)應(yīng)用界面、還要包含系統(tǒng) UI 的場(chǎng)景才需要往captureScreen方向考慮但那種場(chǎng)景往往不如直接走原生自定義實(shí)現(xiàn)。1.3 新老架構(gòu)和版本選擇這一步就淘汰了很多人React Native 從 0.70 左右開(kāi)始推新架構(gòu)到 0.76 后新架構(gòu)成了默認(rèn)選項(xiàng)。react-native-view-shot 對(duì)這塊的適配是有明確版本分界的3.x 只支持舊架構(gòu)的 bridge NativeModule 注冊(cè)方式4.x 才完整適配新架構(gòu)的 TurboModule 和 Codegen。如果你用的 React Native 版本是 0.74 以上且開(kāi)了新架構(gòu)但項(xiàng)目里安裝的 react-native-view-shot 還是 3.4.0一調(diào)用就會(huì)報(bào)NativeModule: RNCViewShot is null因?yàn)樵烁緵](méi)有注冊(cè)這個(gè)模塊。安裝時(shí)我建議直接裝最新版npm install react-native-view-shot如果你是從舊版本升級(jí)上來(lái)的最好先卸載再重裝避免 Metro 緩存了舊模塊npm uninstall react-native-view-shot npm install react-native-view-shotlatestAndroid 端只要用了自動(dòng)鏈接一般重新構(gòu)建一次就行。但如果遇到莫名的 NativeModule 找不到多半不是庫(kù)的問(wèn)題而是構(gòu)建緩存這個(gè)在第四章我會(huì)講怎么清理。2. Android 端最容易翻車的四個(gè)點(diǎn)2.1 一截圖就空白或黑屏這是我在各種技術(shù)群里被問(wèn)得最多的問(wèn)題。一般來(lái)說(shuō)空白和黑屏要分開(kāi)看。空白通常是視圖引用本身沒(méi)生效黑屏則往往是碰到了硬件圖層的內(nèi)容。先說(shuō)空白。RN 在 Android 上有一個(gè)非常隱蔽的優(yōu)化如果某個(gè) View 只用來(lái)做布局容器沒(méi)有任何背景、也沒(méi)有子 View 需要單獨(dú)繪制系統(tǒng)可能會(huì)把它“合并掉”導(dǎo)致ref拿到的原生節(jié)點(diǎn)不存在。截圖時(shí)就會(huì)得到空白圖甚至報(bào)錯(cuò)No view found for reactTag。解決辦法很簡(jiǎn)單給被截圖的 View 加一個(gè)collapsable{false}View ref{viewRef} collapsable{false} style{{ flex: 1, backgroundColor: #fff }} {/* 真正要截圖的內(nèi)容 */} /View這個(gè)屬性告訴 Android這個(gè)原生 View 不要被布局優(yōu)化合并保留它作為獨(dú)立節(jié)點(diǎn)。無(wú)數(shù)人截圖空白其實(shí)就是少寫了這一行。再說(shuō)黑屏。如果頁(yè)面里有視頻播放器、高德/百度地圖、WebView 這類帶獨(dú)立硬件繪制的組件react-native-view-shot 默認(rèn)截不到里面的內(nèi)容。它們內(nèi)部往往是 SurfaceView 或 TextureView內(nèi)容不在 Activity 的 View 層級(jí)里View.draw(Canvas)只能畫出一個(gè)空殼。這種問(wèn)題不是配置參數(shù)能解決的只能換思路視頻考慮讓播放器對(duì)外提供幀數(shù)據(jù)或者用原生端去采集畫面。地圖讓地圖庫(kù)提供靜態(tài)圖快照接口再疊加到你截的圖上。WebView嘗試先攔截 WebView 的截圖或者用 RN 的react-native-webview自帶的captureRef屬性但兼容性也有限。另外還有一個(gè)常見(jiàn)情況頁(yè)面里有網(wǎng)絡(luò)圖片截圖時(shí)圖片還沒(méi)加載完截出來(lái)就是一個(gè)白色的占位塊。解決辦法是等圖片onLoad后再截或者先預(yù)加載圖片。不要在頁(yè)面剛跳轉(zhuǎn)過(guò)來(lái)、任務(wù)隊(duì)列還沒(méi)執(zhí)行完時(shí)就急著按截圖按鈕。2.2 FileProvider 與 content:// 路徑坑captureRef返回的默認(rèn) Uri 是file:///data/user/0/包名/cache/...這樣的路徑。在 Android 7.0 之后系統(tǒng)禁止應(yīng)用之間直接通過(guò)file://分享文件否則會(huì)拋FileUriExposedException。這就是你在很多報(bào)錯(cuò)日志里看到content://com.xxx.fileprovider/...的原因——正規(guī)的跨應(yīng)用文件傳遞必須通過(guò) FileProvider 把一個(gè)文件路徑轉(zhuǎn)換成帶授權(quán)信息的 content Uri。你可能會(huì)在網(wǎng)上看到類似這樣的 Uricontent://你的包名.fileprovider/外部路徑/Android/data/你的包名/...它本質(zhì)上就是 FileProvider 生成的授權(quán)地址。如果你只是用 CameraRoll 保存到相冊(cè)react-native-view-shot 返回的file://臨時(shí)文件是沒(méi)問(wèn)題的CameraRoll 內(nèi)部會(huì)處理拷貝。但如果你要把這個(gè)截圖直接分享到微信、釘釘或者自己寫原生模塊轉(zhuǎn)發(fā)給其他 App就不能直接傳file://路徑了。最省事的做法是不要把 FileProvider 的細(xì)節(jié)暴露到 JS 層。分享功能直接用react-native-share它會(huì)自己處理 content Uri 的生成。如果你確實(shí)需要自己生成 FileProvider Uri原生端要配置兩步第一步在 AndroidManifest.xml 里注冊(cè) FileProviderprovider android:nameandroidx.core.content.FileProvider android:authorities${applicationId}.fileprovider android:exportedfalse android:grantUriPermissionstrue meta-data android:nameandroid.support.FILE_PROVIDER_PATHS android:resourcexml/file_paths / /provider第二步在res/xml/file_paths.xml里指定可暴露的目錄paths cache-path namecache pathcache/ / external-path nameexternal path. / /paths然后在原生代碼里用FileProvider.getUriForFile()轉(zhuǎn)換成 content Uri再傳給目標(biāo)應(yīng)用。這里面的坑在于如果你在paths.xml里沒(méi)有包含截圖臨時(shí)文件所在目錄轉(zhuǎn)換時(shí)會(huì)直接拋異常。很多人在這一步被繞暈其實(shí)只要記住“file:// 是內(nèi)部用content:// 是給外部用”就夠了。2.3 Android 13 以后讀寫權(quán)限沒(méi)那么簡(jiǎn)單如果只是“截圖并保存到相冊(cè)”很多人以為一定要申請(qǐng)存儲(chǔ)權(quán)限。實(shí)際上從 Android 10 開(kāi)始系統(tǒng)強(qiáng)制分區(qū)存儲(chǔ)App 通過(guò) MediaStore 往公共相冊(cè)插入一張圖片并不需要WRITE_EXTERNAL_STORAGE權(quán)限。到了 Android 13情況又變了如果要讀取系統(tǒng)相冊(cè)里的圖片需要申請(qǐng)READ_MEDIA_IMAGES如果只是寫入依然可以不用權(quán)限。真正容易翻車的地方在于項(xiàng)目里如果還保留著舊版 CameraRoll或者用 react-native-fs 直接把截圖寫到/storage/emulated/0/xxx在 Android 10 上可能寫入不進(jìn)去或者寫進(jìn)去了在相冊(cè)里看不到。我的建議是保存相冊(cè)直接用react-native-camera-roll/camera-roll它內(nèi)部封裝了 MediaStore 的插入邏輯兼容性比手寫文件拷貝好很多。如果你還需要讀取相冊(cè)里的圖片比如做一個(gè)“從相冊(cè)選擇圖片后再截圖標(biāo)注”的功能那就要在 Android 13 系統(tǒng)上運(yùn)行時(shí)請(qǐng)求READ_MEDIA_IMAGES并且把 targetSdk 更新到 33 以上。react-native-camera-roll/camera-roll提供了requestReadWritePermission()方法可以在調(diào)用前主動(dòng)檢測(cè)并申請(qǐng)權(quán)限比自己在 JS 層調(diào) PermissionsAndroid 省心。我在真機(jī)上遇到過(guò)一種情況Android 13 的 Pixel 上不申請(qǐng)任何權(quán)限直接調(diào)用CameraRoll.save是成功的但同一個(gè)包在小米的 Android 13 上會(huì)返回 permission denial。這跟廠商對(duì)權(quán)限的額外控制有關(guān)。所以不要抱著僥幸心理權(quán)限請(qǐng)求該加還是加。2.4 截圖時(shí)序動(dòng)畫、鍵盤和彈窗截圖看起來(lái)是瞬時(shí)操作但 RN 的原生繪制和 JS 任務(wù)線程不是完全同步的。我踩過(guò)一個(gè)很典型的坑頁(yè)面右下角有個(gè)浮動(dòng)按鈕點(diǎn)擊它的瞬間有個(gè)漣漪動(dòng)畫緊接著馬上觸發(fā)截圖截出來(lái)的圖片上按鈕邊緣是半透明的、甚至缺一塊。原因是截圖發(fā)生的時(shí)候漣漪動(dòng)畫還沒(méi)有結(jié)束View 正處于中間態(tài)。解決辦法是根據(jù)動(dòng)畫時(shí)長(zhǎng)做一個(gè)短延遲。不要依賴一個(gè)固定的setTimeout(500)就完事更好的做法是InteractionManager.runAfterInteractions(async () { const uri await captureRef(...); });runAfterInteractions會(huì)等當(dāng)前所有交互任務(wù)和部分 JS 任務(wù)執(zhí)行完但它不等原生動(dòng)畫。如果頁(yè)面確實(shí)有動(dòng)畫還是要配合延時(shí)。運(yùn)動(dòng)中的動(dòng)畫如果只需要靜態(tài)結(jié)果建議先把動(dòng)畫停掉或者把要截的動(dòng)畫元素用一個(gè)穩(wěn)定的快照容器包起來(lái)。還有一個(gè)很隱蔽的坑鍵盤彈起時(shí)截圖。Android 的adjustResize模式會(huì)讓整個(gè) Activity 重新布局如果你的頁(yè)面包含 TextInput截圖前應(yīng)該先收起鍵盤并等鍵盤真正隱藏后再截。我當(dāng)時(shí)在截圖前調(diào)用Keyboard.dismiss()然后立刻截圖結(jié)果截出來(lái)的輸入框位置偏了。后來(lái)監(jiān)聽(tīng)keyboardDidHide事件等回調(diào)后再截才穩(wěn)定。3. 一套可以直接抄的完整實(shí)現(xiàn)3.1 截圖并保存到相冊(cè)的完整代碼下面這段代碼是我在項(xiàng)目里驗(yàn)證過(guò)的方案目標(biāo)是把一個(gè)自定義 View 截圖并保存到系統(tǒng)相冊(cè)。依賴就兩個(gè)庫(kù)npm install react-native-view-shot npm install react-native-camera-roll/camera-roll核心代碼import React, { useRef, useCallback } from react; import { View, Button, Alert } from react-native; import { captureRef } from react-native-view-shot; import { CameraRoll } from react-native-camera-roll/camera-roll; export default function SnapshotScreen() { const viewRef useRef(null); const handleSnapshot useCallback(async () { if (!viewRef.current) { Alert.alert(提示, 截圖區(qū)域還沒(méi)準(zhǔn)備好); return; } try { const uri await captureRef(viewRef, { format: png, quality: 1, result: tmpfile, }); const saved await CameraRoll.save(uri, { type: photo }); Alert.alert(成功, 圖片已保存到相冊(cè)); } catch (e) { Alert.alert(失敗, 截圖保存失敗${e.message}); } }, []); return ( View style{{ flex: 1 }} View ref{viewRef} collapsable{false} style{{ flex: 1, backgroundColor: #fff, justifyContent: center, alignItems: center, }} {/* 這里放你真正要截圖的內(nèi)容 */} View style{{ width: 200, height: 100, backgroundColor: #1677ff, borderRadius: 4, }} / /View Button title截圖并保存 onPress{handleSnapshot} / /View ); }如果你用的是 React Native 0.72 之前的版本CameraRoll 的 API 可能還是CameraRoll.saveImage()新版改成了save()。升級(jí)之后要留意這一點(diǎn)。Android 端權(quán)限申請(qǐng)這塊建議直接使用 CameraRoll 提供的輔助方法import { CameraRoll } from react-native-camera-roll/camera-roll; const hasPermission await CameraRoll.requestReadWritePermission(); if (!hasPermission) { Alert.alert(提示, 需要相冊(cè)權(quán)限才能保存圖片); return; }注意requestReadWritePermission并不是所有版本都有不同版本 API 名可能有差異。用之前去 node_modules 里看一眼類型定義是最穩(wěn)妥的。3.2 options 參數(shù)怎么選才不踩坑react-native-view-shot 的captureRef第二個(gè)參數(shù)是 options這里面的門道不少。format建議在沒(méi)有透明背景需求時(shí)用jpg體積小、保存快。但如果你截的 View 用了圓角、半透明背景jpg 會(huì)把透明區(qū)域填成黑色這時(shí)候應(yīng)該用png。一般 UI 分享卡片我推薦 png照片類內(nèi)容推薦 jpg。quality只在 jpg 時(shí)有效取值 0 到 1。大多數(shù)場(chǎng)景直接用 0.9 就夠了肉眼幾乎看不出區(qū)別文件體積能小不少。我之前為了省體積調(diào)到 0.7結(jié)果在人像邊緣出現(xiàn)明顯馬賽克后來(lái)就一直用 0.9。result有三個(gè)可選值tmpfile、data-uri、base64。我的原則是能選 tmpfile 就選 tmpfile尤其是圖片尺寸大時(shí)。base64 會(huì)把整個(gè)圖片塞進(jìn)內(nèi)存截圖長(zhǎng)圖時(shí)很容易 OOM。只有在你要直接把圖片通過(guò)接口上傳且不想管理臨時(shí)文件的時(shí)候才考慮 base64并且要控制圖片分辨率。width和height可以指定輸出圖片的像素尺寸。如果不傳默認(rèn)使用視圖的實(shí)際尺寸乘上屏幕 density。有的截圖在相冊(cè)里看起來(lái)偏小就是因?yàn)橐晥D尺寸不大。你可以這樣主動(dòng)設(shè)置高分辨率const { width, height } Dimensions.get(window); const uri await captureRef(viewRef, { format: png, quality: 1, result: tmpfile, width: width * 2, height: height * 2, });這樣輸出的圖片會(huì)清晰很多適合生成海報(bào)。snapshotContentContainer是 ScrollView 場(chǎng)景下的神器。設(shè)為true后可以截取整個(gè)滾動(dòng)內(nèi)容而不僅限于當(dāng)前可視區(qū)域。但它消耗的內(nèi)存也會(huì)明顯上升使用時(shí)要注意控制內(nèi)容高度。3.3 長(zhǎng)頁(yè)面截圖和內(nèi)存控制很多人想做“長(zhǎng)截圖”也就是把整個(gè) ScrollView 內(nèi)容一次性截成一張長(zhǎng)圖。react-native-view-shot 提供了snapshotContentContainer確實(shí)能截但代價(jià)是內(nèi)存。如果列表里只有幾屏內(nèi)容還好一旦你的 ScrollView 內(nèi)容超過(guò) 3000dp換算成像素就是幾千乘幾千的 Bitmap內(nèi)存占用非?？植?。我實(shí)測(cè)過(guò)一張 4000px 高的截圖低端機(jī)上內(nèi)存瞬間飆到 300MB頁(yè)面直接被殺后臺(tái)。所以如果產(chǎn)品真正需要長(zhǎng)圖我的建議是控制輸出尺寸盡量把 width 設(shè)置成 750 左右而不是原圖兩倍。不要對(duì)動(dòng)態(tài)長(zhǎng)列表直接截最好由服務(wù)端生成長(zhǎng)圖卡片。如果非要在端上截可以分段截取多個(gè) View再通過(guò)原生端拼接成一張長(zhǎng)圖但這個(gè)復(fù)雜度已經(jīng)超出 react-native-view-shot 的職責(zé)了。另外臨時(shí)文件生成后不會(huì)自動(dòng)清理。如果用戶頻繁截圖緩存目錄會(huì)越來(lái)越大。建議每次截圖后對(duì)舊文件做一次清理或者用原生端定期清理 cache 目錄。4. 問(wèn)題排查與避坑記錄4.1 常見(jiàn)報(bào)錯(cuò)速查表下面是我在實(shí)際開(kāi)發(fā)中遇到的典型報(bào)錯(cuò)以及對(duì)應(yīng)的解決思路。報(bào)錯(cuò)信息或現(xiàn)象可能原因解決辦法NativeModule: RNCViewShot is null庫(kù)版本不兼容新架構(gòu)或者 autolinking 沒(méi)有生效升級(jí)到 4.x清構(gòu)建緩存重新構(gòu)建Error: No view found for reactTagref 綁定的 View 不存在或者被布局優(yōu)化合并給目標(biāo) View 加collapsable{false}并確認(rèn) ref 已掛載截圖是一張純白圖內(nèi)容還沒(méi)渲染完成或者網(wǎng)絡(luò)圖片未加載等onLoad和布局完成后再截必要時(shí)加短延時(shí)截圖是黑屏頁(yè)面包含 SurfaceView/TextureView/WebView這類硬件圖層無(wú)法通過(guò) draw 截取換方案FileUriExposedException把 file:// 路徑直接傳給其他 App使用 FileProvider 轉(zhuǎn) content Uri或交給分享庫(kù)處理CameraRoll.save拒絕訪問(wèn)Android 13 相冊(cè)權(quán)限不足或廠商限制運(yùn)行時(shí)申請(qǐng)READ_MEDIA_IMAGES用 CameraRoll 的集成權(quán)限方法截出來(lái)的圖片尺寸不對(duì)options 沒(méi)有設(shè)置 width/height或視圖尺寸為 0檢查目標(biāo) View 的布局主動(dòng)傳入期望的分辨率這表里最后一行很值得多說(shuō)一句。如果目標(biāo) View 正在做顯示動(dòng)畫比如transform: scale(0)初始狀態(tài)它的測(cè)量寬高可能是 0截出來(lái)就是空?qǐng)D。這種情況可以先在截圖前臨時(shí)設(shè)置一個(gè)確定尺寸或者等動(dòng)畫結(jié)束。4.2 用 Android Studio 和 adb 定位問(wèn)題截圖這種偏原生的問(wèn)題只靠 console.log 有時(shí)候很難看出頭緒。我習(xí)慣把 Android Studio 的 Logcat 打開(kāi)過(guò)濾器里同時(shí)加ReactNativeJS和RNCViewShot這樣 JS 報(bào)錯(cuò)和原生模塊日志能一起看到。如果captureRef返回了路徑但保存相冊(cè)失敗可以用 adb 查看緩存文件是否存在adb shell run-as 你的包名 ls cache/注意run-as僅對(duì) debug 包有效。release 包簽名不一樣通常無(wú)法直接查看。這個(gè)命令能幫你快速確認(rèn)臨時(shí)文件有沒(méi)有生成出來(lái)。如果截圖已經(jīng)保存到相冊(cè)但相冊(cè)里看不到可以檢查公共目錄adb shell ls -l /storage/emulated/0/Pictures如果文件在但相冊(cè)不刷新那就不是截圖的問(wèn)題是 MediaScanner 沒(méi)有掃描。這里順便提一個(gè)調(diào)試技巧adb exec-out screencap -p screen.png可以截取整個(gè)系統(tǒng)屏幕適合用來(lái)對(duì)比應(yīng)用內(nèi)截圖和系統(tǒng)全屏截圖之間的區(qū)別但它和應(yīng)用內(nèi)截圖完全不是一回事。4.3 新老架構(gòu)下的最后一個(gè)冷門坑即使你已經(jīng)裝了 4.x 版本的 react-native-view-shot在新架構(gòu)下還是有可能遇到類找不到、模塊為 null 的情況。原因通常不是庫(kù)本身而是 Codegen 生成的產(chǎn)物沒(méi)有及時(shí)更新。這種問(wèn)題我有兩次是靠清理工程解決的cd android ./gradlew clean npx react-native start --reset-cache如果項(xiàng)目剛升級(jí)完 React Native 版本最好把整個(gè) android 下的 build 目錄刪掉重新構(gòu)建。很多“玄學(xué)問(wèn)題”實(shí)際上都是舊構(gòu)建殘留導(dǎo)致的。另一個(gè)冷門坑是新版 React Native 默認(rèn)新架構(gòu)但部分老項(xiàng)目的gradle.properties里還寫著newArchEnabledfalse。如果你在升級(jí)后用了一個(gè)只支持舊架構(gòu)的三方庫(kù)整個(gè) App 可能直接編譯失敗。而 react-native-view-shot 4.x 同時(shí)兼容新老架構(gòu)所以它反而是一個(gè)很好的“架構(gòu)遷移試金石”。如果這種純 JS 包在遷移后能正常跑說(shuō)明你的原生工程配置基本沒(méi)問(wèn)題。5. 截圖之后的事保存、分享和產(chǎn)品化5.1 保存到相冊(cè)后刷新與分享截圖保存到相冊(cè)后偶爾會(huì)出現(xiàn)“明明保存了但相冊(cè)里看不到”的情況。本質(zhì)上是因?yàn)?MediaStore 插入文件后相冊(cè)應(yīng)用沒(méi)有及時(shí)刷新。用react-native-camera-roll/camera-roll的save()一般會(huì)自動(dòng)觸發(fā) MediaScanner 掃描所以不推薦自己手動(dòng)把圖片文件拷到公共目錄再發(fā)廣播。分享截圖則是另一個(gè)常見(jiàn)場(chǎng)景。如果你先把圖片保存到相冊(cè)再?gòu)南鄡?cè)拿 url 去分享中間會(huì)多一層權(quán)限和路徑的轉(zhuǎn)換。更好的做法是先captureRef拿到臨時(shí)文件直接把臨時(shí)文件交給react-native-share讓它內(nèi)部處理 FileProvider。這樣分享鏈路短、權(quán)限問(wèn)題少。如果你需要分享的同時(shí)保存相冊(cè)那就分別調(diào)用兩個(gè)庫(kù)不要在 JS 層共享同一個(gè) file:// 路徑。5.2 截圖功能還能怎么玩react-native-view-shot 不只是用來(lái)“截圖給用戶看”。我用它做過(guò)分享卡片生成器把一段業(yè)務(wù)數(shù)據(jù)渲染成一張帶背景圖和用戶信息的 View然后整體截圖保存效果比用 canvas 手繪簡(jiǎn)單得多。朋友圈裂變海報(bào)、訂單憑證、成績(jī)單分享都可以走這個(gè)思路。還有個(gè)熱門方向是“截圖翻譯”。很多截圖工具會(huì)把截圖區(qū)域截下來(lái)然后送 OCR 識(shí)別并翻譯。放到 App 里你可以在應(yīng)用內(nèi)截取當(dāng)前頁(yè)面拿到圖片后跳到一個(gè)編輯/識(shí)別界面做標(biāo)注、高亮、OCR形成完整閉環(huán)。react-native-view-shot 作為第一步的采集工具足夠輕量不會(huì)給主包增加太多體積。5.3 我最終確定的實(shí)踐方案截圖這種事看起來(lái)只是把一個(gè) View 變成圖片背后卻牽扯到 Android 的繪制機(jī)制、文件共享規(guī)則和權(quán)限模型。react-native-view-shot 能幫你解決 80% 的場(chǎng)景但剩下 20% 的視頻、地圖、長(zhǎng)圖場(chǎng)景最好在設(shè)計(jì)需求時(shí)就規(guī)避掉或者直接交給原生端定制。如果你現(xiàn)在正要啟動(dòng)一個(gè) RN 截圖需求我建議先問(wèn)清楚三件事截圖范圍是局部還是全屏要不要包含視頻或 WebView產(chǎn)物是保存到相冊(cè)還是分享到別的 App這三個(gè)問(wèn)題確認(rèn)完方案基本就定了。最后再多說(shuō)一句上線前一定多拿幾臺(tái)不同 Android 版本的機(jī)器測(cè)一測(cè)尤其是 Android 13 和 14 的全面屏手機(jī)截圖這種功能最容易在系統(tǒng)差異上翻車。希望我這些踩坑記錄能幫你省下一個(gè)下午的時(shí)間。