expo-file-system
@amazon-devices/expo-file-systemは、デバイスのファイルシステムへのアクセスを提供します。また、ネットワークURLからのファイルのダウンロードやアップロードを行うこともできます。
インストール
package.jsonファイルにJavaScriptライブラリの依存関係を追加します。"dependencies": { ... "@amazon-devices/expo-file-system": "~2.0.0", "expo": "~50.0.0", ... }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では以下のクラスをサポートしていません。
DownloadResumableFileSystemCancellableNetworkTaskUploadTask
サポートされているバージョン
| パッケージのバージョン | ベース | @amazon-devices/react-native-kepler version |
|---|---|---|
| 2.0.x | 15.8.0 | 2.0.x |
関連リソース
その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。
Last updated: 2025年9月30日

