Zenn
Open7

React Native 画像関係

React Native
#
画像
#
picture
#
reat
とっきーとっきー

権限の追加
android10

app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

android13

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

書き込みをするときに、許可されているか確認する必要がある。

import { PermissionsAndroid } from "react-native";

// 権限の有無をチェック
const hasAndroidPermission = async () => {
  const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

  const hasPermission = await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }

  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
}
とっきーとっきー

追記

android\app\src\main\java\com\learningme\MainApplication.java
import com.reactnativecommunity.cameraroll.CameraRollPackage;

// ↓は必要なかった
@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new CameraRollPackage()) // ← 多分こうゆうこと
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;
  }
android/settings.gradle
include ':@react-native-camera-roll_camera-roll'
project(':@react-native-camera-roll_camera-roll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-camera-roll/camera-roll/android')

dependenciesブロックに追記

android/app/build.gradle
  implementation project(':@react-native-camera-roll_camera-roll')

AndroidManifest.xmlのapplicationタグ内に追記

AndroidManifest.xml
<manifest ... >
  <application android:requestLegacyExternalStorage="true" ... > 
    ...
  </application>
</manifest>
とっきーとっきー

React NativeからCameraRollが切り離された際に作成されたモジュールのため、インポート時には下のように書く

import { CameraRoll } from "react-native";

ではなく

import { CameraRoll } from "@react-native-camera-roll/camera-roll";

と書けと

とっきーとっきー

react-native-fsで使えるabsolute path

CachesDirectoryPath          (String) The absolute path to the caches directory
ExternalCachesDirectoryPath  (String) The absolute path to the external caches directory (android only)
DocumentDirectoryPath        (String) The absolute path to the document directory
DownloadDirectoryPath        (String) The absolute path to the download directory (on android only)
TemporaryDirectoryPath       (String) The absolute path to the temporary directory (falls back to Caching-Directory on Android)
ExternalDirectoryPath        (String) The absolute path to the external files, shared directory (android only)
ExternalStorageDirectoryPath (String) The absolute path to the external storage, shared directory (android only)

MainBundlePath               (String) The absolute path to the main bundle directory (not available on Android)
LibraryDirectoryPath         (String) The absolute path to the NSLibraryDirectory (iOS only)