ImagePickerを使うときのデバイスのパーミッション関連

ImagePicker

Udemyの"実践的！作って学ぶReactNative入門！"でexpoを使っていてreact-native-image-crop-pickerの代わりにImagePickerを使ったのですが、その時にパーミッションでちょっと苦戦したのでメモを残しておきます。以下のサイトを参考にしました。JavaScript, ReactNative初心者なので書き方が適切であるかはわかりません。

Permissions - Expo Documentation
ImagePicker - Expo Documentation

ソースコード

import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';
import { ImagePicker, Permissions, Camera, CameraRoll } from 'expo';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      image: null,
      permission: false,
    };
  }

  async componentWillMount() {
    let results = await Promise.all([
      await Permissions.askAsync(Permissions.CAMERA),
      await Permissions.askAsync(Permissions.CAMERA_ROLL)
    ]);

    this.setState({ permission: 
      results.every((result) => {
        const { status } = result;
        return status === 'granted';
      })
    });
  }

  render() {
    let { image } = this.state;
    const { permission } = this.state;

    if (permission === false) {
      return (
        <View style={styles.container}>
          <Text>カメラの使用が許可されていません。</Text>
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
        }
      </View>
 
    );
    
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    //console.log(result);

    if (!result.canelled) {
      this.setState({ image: result.uri });
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ざっくり説明

パーミッションの取得はcomponentWillMountで行なっています。コールバック関数を用いて結果が全て"granted"であればtrue、そうでなければfalseを返しています。stateにパーミッションを記録して、それのtrue or falseでreturn文を切り替えています。