expo-asset

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

@amazon-devices/expo-assetは、アセットをダウンロードしてほかのAPIに渡すためのExpoユニバーサルモジュールを提供します。

インストール
例
APIリファレンス
- フック
- クラス
  - Assetのプロパティ
  - Assetのメソッド
サポートされているバージョン
関連リソース

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
 dependencies: {
      ...
     "@amazon-devices/expo-asset": "~2.0.0",
     "expo": "~50.0.0",
     ...
}
```
npm installコマンドを使用して、依存関係を再インストールします。

例

以下の例は、useAssetsフックを使用して、アセットをローカルにダウンロードして保存する方法を示しています。

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

import React from 'react';
import {useAssets} from '@amazon-devices/expo-asset';
import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';

export const App = () => {
  // eslint-disable-next-line no-unused-vars
  const [assets, _] = useAssets([
    require('./assets/learn.png'),
    require('./assets/kepler.png'),
  ]);

  if (!assets) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          アセットが選択されていません。`useAssets`メソッドで提供されているパスを確認してください
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Image
        source={assets[0] as ImageSourcePropType}
        width={400}
        height={400}
      />
      <Image
        source={assets[1] as ImageSourcePropType}
        width={400}
        height={400}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    flexDirection: 'row',
    gap: 100,
  },
  text: {
    fontSize: 30,
    backgroundColor: 'black',
  },
});

以下の例は、loadAsyncメソッドを使用してアセットをダウンロードする方法を示しています。

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

import React, {useState} from 'react';
import {Asset} from '@amazon-devices/expo-asset';
import {
  Button,
  Image,
  ImageSourcePropType,
  StyleSheet,
  Text,
  View,
} from 'react-native';

export const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [image, setImage] = useState<Asset>();

  const onLoadAsset = async () => {
    setIsLoading(true);
    const [asset] = await Asset.loadAsync(require('./assets/kepler.png'));
    setImage(asset);
    setIsLoading(false);
  };

  return (
    <View style={styles.container}>
      <Button title="アセットを読み込む" onPress={onLoadAsset} />
      {isLoading && <Text style={styles.text}>Loading...</Text>}
      {image && <Image source={image as ImageSourcePropType} />}
    </View>
  );
};

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

APIリファレンス

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

フック

フック	説明
`useAssets`	1つ以上のアセットをローカルにダウンロードして保存します。

クラス

クラス	説明
`Asset`	`Asset`クラスは、アプリ内のアセットを表します。

Assetのプロパティ

プロパティ	説明
`downloaded`	アセットがダウンロードされたかどうかを示すブール値。
`downloading`	アセットがダウンロード中かどうかを示すブール値。
`hash`	アセットのデータのMD5ハッシュ。
`height`	アセットが画像の場合、画像データの高さを倍率で割った値。倍率はファイル名の@の後の数値です。指定されていない場合は1になります。
`localUri`	アセットが（downloadAsync()の呼び出しによって）ダウンロード済みの場合、アセットデータのあるデバイス上のローカルファイルを指す`file://` URI。
`name`	拡張子を除いたアセットファイルの名前。ファイル名の@以降の部分（画像の倍率を指定するために使用）も除外されます。
`type`	アセットファイル名の拡張子。
`uri`	リモートサーバー上のアセットのデータを指すURI。
`width`	アセットが画像の場合、画像データの幅を倍率で割った値。倍率はファイル名の@の後の数値です。指定されていない場合は1になります。

Assetのメソッド

メソッド	説明
`downloadAsync`	アセットデータを、デバイスのキャッシュディレクトリにローカルファイルとしてダウンロードします。
`fromMetaData`	指定されたメタデータに基づいて、そのアセットを表すアセットインスタンスを返します。
`fromModule`	指定されたモジュールまたはURLに基づいて、そのアセットを表すAssetインスタンスを返します。
`fromURI`	指定されたURIに基づいて、そのアセットを表すAssetインスタンスを返します。
`loadAsync`	Asset.fromModule(module).downloadAsyncをラップして使用しやすくしたヘルパーです。

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

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