as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

expo-file-system

expo-file-system

@amazon-devices/expo-file-systemは、デバイスのファイルシステムへのアクセスを提供します。また、ネットワークURLからのファイルのダウンロードやアップロードを行うこともできます。

インストール

  1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

    クリップボードにコピーしました。

     "dependencies": {
     ...
     "@amazon-devices/expo-file-system": "~2.0.0",
     "expo": "~50.0.0",
     ...
     }
    
  2. npm installコマンドを使用して、依存関係を再インストールします。

以下の例は、テキストをファイルに書き込む方法を示しています。

クリップボードにコピーしました。

import React, {useEffect, useState} from 'react';
import {Alert, Button, StyleSheet, Text, View} from 'react-native';
import * as FileSystem from '@amazon-devices/expo-file-system';

export const App = () => {
  const [fileContent, setFileContent] = useState<string | null>(null);
  const fileUri = FileSystem.documentDirectory + 'sample.txt';

  useEffect(() => {
    (async () => {
      const fileInfo = await FileSystem.getInfoAsync(fileUri);
      if (fileInfo.exists) {
        const content = await FileSystem.readAsStringAsync(fileUri);
        setFileContent(content);
      } else {
        setFileContent('ファイルが存在しません - ファイルに書き込む必要があります');
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const writeFile = async () => {
    try {
      await FileSystem.writeAsStringAsync(fileUri, 'ファイルシステムへようこそ!');
      Alert.alert('ファイルが正常に書き込まれました。');
    } catch (error) {
      console.error('ファイルの書き込みエラー:', error);
    }
  };

  const readFile = async () => {
    try {
      const content = await FileSystem.readAsStringAsync(fileUri);
      setFileContent(content);
    } catch (error) {
      console.error('ファイルの読み取りエラー:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>File Content: {fileContent}</Text>
      <Button title="ファイルへの書き込み" onPress={writeFile} />
      <Button title="ファイルの読み取り" onPress={readFile} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  text: {
    fontSize: 30,
    textAlign: 'center',
  },
});

以下の例は、ファイルをダウンロードまたはアップロードする方法を示しています。

クリップボードにコピーしました。

import * as FileSystem from '@amazon-devices/expo-file-system';
import {DownloadOptions, FileSystemUploadOptions} from '@amazon-devices/expo-file-system';
import React, {useState} from 'react';
import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';

export const App = () => {
  const downloadAsyncArgs: {
    uri: string;
    fileUri: string;
    options: DownloadOptions;
  } = {
    uri: 'https://httpbin.org/get',
    fileUri: FileSystem.documentDirectory + 'downloadResponse.json',
    options: {
      md5: true,
      cache: false,
      headers: {
        Accept: 'application/json',
      },
    },
  };
  const uploadAsyncArgs: {
    url: string;
    fileUri: string;
    options: FileSystemUploadOptions;
  } = {
    url: 'https://httpbin.org/patch',
    fileUri: FileSystem.documentDirectory + 'downloadResponse.json',
    options: {
      fieldName: 'data',
      httpMethod: 'PATCH',
      uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
      headers: {
        Accept: 'application/json',
      },
    },
  };

  const [downloadResponse, setDownloadResponse] =
    useState<FileSystem.FileSystemDownloadResult>();
  const [uploadResponse, setUploadResponse] =
    useState<FileSystem.FileSystemUploadResult>();

  const handleDownloadAsync = async () => {
    const {uri, fileUri, options} = downloadAsyncArgs;
    FileSystem.downloadAsync(uri, fileUri, options)
      .then(setDownloadResponse)
      .catch((error) => setDownloadResponse(error.message));
  };

  const handleUploadAsync = async () => {
    const {url, fileUri, options} = uploadAsyncArgs;
    FileSystem.uploadAsync(url, fileUri, options)
      .then(setUploadResponse)
      .catch((error) => setUploadResponse(error.message));
  };

  return (
    <ScrollView style={styles.container}>
      <Button title="ファイルをダウンロード" onPress={handleDownloadAsync} />
      <View style={styles.cell}>
        <Text style={styles.cellText}>
          {JSON.stringify(downloadResponse, null, 2)}
        </Text>
      </View>

      <Button title="ファイルをアップロード" onPress={handleUploadAsync} />
      <View style={styles.cell}>
        <Text style={styles.cellText}>
          {JSON.stringify(uploadResponse, null, 2)}
        </Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  cell: {
    flex: 1,
    padding: 10,
    borderWidth: 2,
    justifyContent: 'center',
    borderColor: 'white',
  },
  cellText: {
    fontSize: 24,
    color: 'black',
  },
});

APIリファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、Expo公式ドキュメントのexpo-fileのページ(英語のみ)を参照してください。

定数

定数 説明
documentDirectory このアプリのユーザードキュメントの保存先ディレクトリを指すURI。例:/data/
cacheDirectory このアプリで使用される一時ファイルの保存先ディレクトリを指すURI。例:/cache/
bundleDirectory アプリにバンドルされたアセットが保存されているディレクトリのURI。例:/pkg/bundle/index.hermes.bundle

メソッド

メソッド 説明
copyAsync ファイルまたはディレクトリのコピーを作成します。
deleteAsync ファイルまたはディレクトリを削除します。
downloadAsync リモートURIのコンテンツを、アプリのファイルシステム内のファイルとしてダウンロードします。
getContentUriAsync file:// URIを受け取り、コンテンツURI(content://)に変換して、Expo外部のほかのアプリからアクセスできるようにします。
getFreeDiskStorageAsync 使用可能な内部ディスクストレージサイズをバイト単位で取得します。
getInfoAsync ファイル、ディレクトリ、外部コンテンツ/アセットに関するメタデータ情報を取得します。
getTotalDiskCapacityAsync 内部ディスクストレージの合計サイズをバイト単位で取得します。
makeDirectoryAsync 新規で空のディレクトリを作成します。
moveAsync ファイルまたはディレクトリを別の場所に移動します。
readAsStringAsync ファイルの内容全体を文字列として読み取ります。
readDirectoryAsync ディレクトリの内容を列挙します。
uploadAsync fileUriが指すファイルの内容をリモートURLにアップロードします。
writeAsStringAsync ファイルの内容全体を文字列として書き込みます。

サポートされるURIスキーム

以下の表は、各メソッドで扱うことができるURIのタイプを示しています。

メソッド名 サポートされるURI
getInfoAsync スキームなし(/data/file.txtなど)
readAsStringAsync スキームなし
writeAsStringAsync スキームなし
deleteAsync スキームなし
moveAsync ソース:スキームなし、宛先:スキームなし
copyAsync ソース:スキームなし、宛先:スキームなし
makeDirectoryAsync スキームなし
readDirectoryAsync スキームなし
downloadAsync ソース:http://https://、宛先:スキームなし
uploadAsync ソース:スキームなし、宛先:http://https://
createDownloadResumable ソース:http://https://、宛先:スキームなし

実装の詳細

Vegaでは、getTotalDiskCapacityAsyncは常に0を返します。

また、Vegaでは以下のクラスをサポートしていません。

  • DownloadResumable
  • FileSystemCancellableNetworkTask
  • UploadTask

サポートされているバージョン

パッケージのバージョン ベース @amazon-devices/react-native-kepler version
2.0.x 15.8.0 2.0.x

関連リソース

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。


Last updated: 2025年9月30日