Qiita Engineer Festa20242024年7月17日まで開催中！

WindwosのみiPhone実機とMACなしでiosアプリのスクリーンショットを作る[React Native expo]

Last updated at 2024-06-27Posted at 2024-06-27

始めに

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を撮りたいデバイスの値に手動で設定します、その他の画面サイズ依存の数値も全て書き換えます

画面サイズの参照

ステータスバーの参照

画面サイズの参照

iphone11の場合

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);
  }
};