アプリ使用時に「カメラへのアクセスを許可しますか？」というダイアログが表示されるのを見たことがあるかと思いますが、今回はそのアクセスリクエストを行う方法についてです。
Android については、PermissionsAndroid という API が React Native にあるのでそちらを使いました。
で、iOS の場合は「react-native-permissions」というライブラリを導入すれば簡単に行えます。
GitHub のページはこちらから。
zoontek/react-native-permissions: An unified permissions API for React Native on iOS and Android
https://github.com/zoontek/react-native-permissions
では導入方法ですが、今回は iOS での導入手順のみのご紹介です。
まず下記コマンドでライブラリをインストールします。
npm install --save react-native-permissions@2.2.2
なお、バージョンを指定しているのは、諸事情あって Xcode を古いバージョンを使っているため最新バージョンのライブラリが動かなかったからです。
次に、Podfile に、アクセスリクエストをしたい項目を追加します。
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary.podspec"
私の場合、カメラとフォトアルバムにアクセスする権限をリクエストしたいので、これらを追加しています。
追加し終わったら、pod install コマンドを実行してください。
上記が完了したら、アクセスリクエストを行いたいページにライブラリを追加します。
import { requestMultiple, PERMISSIONS } from 'react-native-permissions';
最後に、任意のタイミングでアクセスリクエストを行います。
私はページを表示したタイミングで実行するようにしました。
なお、下記の書き方をすると、複数のリクエストを一度に行うことができます。
requestMultiple([PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.PHOTO_LIBRARY]).then((statuses) => {
console.log('Camera', statuses[PERMISSIONS.IOS.CAMERA]);
console.log('PhotoLibrary', statuses[PERMISSIONS.IOS.PHOTO_LIBRARY]);
});
追加するのは以上です！
実際にアプリを実行したところ、ページが読み込まれたタイミングで、カメラとフォトアルバムへのアクセス許可を尋ねるダイアログが表示されました！
私は使いませんでしたが、他にもリクエストはせずにアクセス権限があるかの確認が行えたり、もしくは 1つずつアクセス権限をリクエストしたり、あとはアプリ設定を開くこともできるようです。
このあたりは、機会があれば実際に浸かってみたいですね。
以上、React Native でカメラ等へのアクセス権限のリクエストができるライブラリ「react-native-permissions」のご紹介でした。
ご参考になれば幸いです。
