始めに
iPhone実機なしといいましたが、なんでもいいのでiosデバイスがあった方が楽です。
さすがにiosデバイスなしでiosアプリ開発しているとは思えないので、iosデバイスがない場合の方法は最後に書きます。
準備
必要なライブラリをインストールしてimportします
npx expo install react-native-view-shot expo-file-system expo-media-library
import React, { useRef } from 'react';
import { captureRef } from 'react-native-view-shot';
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';
ルートコンポーネントやスクリーンコンポーネントのwidthとheightを撮りたいデバイスの値に手動で設定します、その他の画面サイズ依存の数値も全て書き換えます
画面サイズの参照
ステータスバーの参照
画面サイズの参照
const insets: { top: number; bottom: number } = { top: 48, bottom: 34 };
const width = 414;
const height = 896;
const StatusBar = ({ エラーを出さないための引数 }: props) => {
return (
<View
style={{ top: 0, width: width, height: 48, backgroundColor: "#f2f3f5" }}
/>
);
};
撮影
下記の関数にルートコンポーネントやスクリーンコンポーネントのrefを渡します、実行方法はuseEffectでレンダリングされてから10秒後に撮影や、どれかのボタンを改造するなどご自由に。
const captureScreen = async (viewRef: any) => {
try {
// カメラロールへのアクセス許可をリクエスト
const { status } = await MediaLibrary.requestPermissionsAsync();
if (status !== 'granted') {
alert('Permission to access camera roll is required!');
return;
}
// Viewのキャプチャ
const uri = await captureRef(viewRef, {
format: 'png',
quality: 0.8,
});
// メディアライブラリに保存
const asset = await MediaLibrary.createAssetAsync(uri);
await MediaLibrary.createAlbumAsync('MyApp', asset, false);
console.log('Image saved to camera roll!');
} catch (error) {
console.error('Error capturing and saving view:', error);
}
};
iphone 6sでiphone 11の画像を撮影する例
実機iphone6sの画面 (黒いところは撮影ボタン)
captureRefで撮影したやつ
画像の加工
ここからステータスバーの素材をダウンロードして、さっき撮った画像に当てはめると
この画像をmockuphoneで加工すると
ホームバーがない以外完璧なスクリーンショットが完成しました、ホームバーは用意するか下画面を隠すことで対応しましょう。
宣伝
ネタ帳のSNSアプリ"カチッ"をリリースしました、ネタ探しで使用したり、ネタ帳として使って、投稿することでコメントのフィードバックでネタの改善が可能です、今なら開発者が確実にコメントを書くので、使ってみてください。
Windwosのみで撮影する方法
スクリーンショットの撮影以外は終わったけど、その段階でiphoneが壊れたなどの緊急時に使用する方法です
まず、expoに登録して、expo snackにモックアップ用のプロジェクトをコピペします。
そして右画面のiosをクリックして、
Launch Snackをクリックしてエミュレータで撮影します。
そのあとは、エミュレータを上にスワイプしてホーム画面に行き(かなり反応が遅いので何秒かクリックし続けてから上にスワイプする必要がある)
safariを起動してgoogle driveあたりにアップロードしましょう。