スクリーンショット、特に部分スクショをとりたい。
Expo Managedプロジェクトで特定のViewを画像として保存する方法を探します。
スナップショットという単語が思いつかなかったので少し見つけにくかった。
React Native 0.60 Expo v34
take-snapshot-async
Expoでスナップショットをとる機能がありました。
v34.0.0/sdk/take-snapshot-asyncにある使い方をしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { takeSnapshotAsync } from "expo"; ... saveView = () => { console.log(takeSnapshotAsync); takeSnapshotAsync(this.view, { result: "tmpfile", quality: 1, height: 1080, width: 1080, format: "png" }) .then(img => { console.log(img); }) .catch(e => { console.log(e.stack); }); }; ... <View ref={ref => (this.view = ref)}>...</View> |
するとtakeSnapshotAsyncはundefinedでありエラーになります。
ちょうどExpo34で同じエラーのトピックがあった。
バージョンアップで機能削除されて文書だけ残ってるんじゃとか言われてますね。
react-native-view-shot
gre/react-native-view-shotはExpoでもbare appsならこれ使えとありますね。
Expo managedでも使えるので使ってみます。
|
1 2 3 4 5 6 7 |
//追加 >expo install react-native-view-shot //代わりのインポート import { captureRef } from "react-native-view-shot"; captureRef(this.view, {... |
takeSnapshotAsyncと同様の処理ができました。
<ViewShot>コンポーネントを使って指定することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import ViewShot, { captureRef } from "react-native-view-shot"; ... saveView = () => { this.viewShot.capture().then(uri => { ... }); } ... <ViewShot ref={ref => (this.viewShot = ref)}> ...//保存したいコンポーネント </ViewShot> |
以前やった画像保存と合わせて使えばちょっとした画像化は簡単にできそう。