React Native + Expo.ioでさくっとカメラアプリを作ってみる

はじめに

React Nativeでカメラ機能を開発するならreact-native-image-pickerを使うと思いますが、Expo SDKでもAPIが提供されているので、今回はそれを使ってカメラアプリを作ってみます。

react-community/react-native-image-picker

動作環境

• macOS High Sierra Version 10.13
• Expo XDE Version 2.21.0
• Expo SDK v22.0.0

プロジェクト新規作成

まずはExpo XDEから新規プロジェクトを作成します。

Expo.ioの導入はこちらから

カメラアプリを開発するので、実機でデバッグします。

[Share]ボタンからQRコードを表示させ、実機のExpoアプリで読み取ります。

ルートコンポーネント修正

ルートディレクトリ直下のApp.jsを修正して、今回作成するImagePicker用のコンポーネントを埋め込む形にします。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ImagePickerSample from './src/components/ImagePicker';

export default class App extends React.Component {
  render() {
    return (
      <ImagePickerSample />
    );
  }
}

ImagePicker用のコンポーネント作成

以下のディレクトリにコンポーネントを作成します。

src/components/ImagePicker.js

端末のカメラを起動して画像を取得する機能とカメラロールから選択する機能を実装しました。

機能的には2つのAPIを使って取得した画像を貼っつけるというシンプルなものですが、Expo SDKを使ってネイティブのAPIを呼び出すことが出来ることが分かります。

import React, { Component } from 'react';
import { View, Text, Button, Image } from 'react-native';
import { ImagePicker } from 'expo';

class ImagePickerSample extends Component {

    state = {
        image: null
    }

    // カメラを起動
    _takePhoto = async () => {
        let result = await ImagePicker.launchCameraAsync({
            allowsEditing: false
        });

        console.log(result);

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

    // カメラロールから選択
    _pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [16, 9]
        });

        console.log(result);

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

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

        return(
            <View style={styles.containerStyle}>
                <Text>Image Picker Sample</Text>

                <Button
                    onPress={this._takePhoto}
                    title="カメラを起動"
                />

                <Button
                    onPress={this._pickImage}
                    title="カメラロールから選択"
                />

                {
                    image &&
                    <Image
                        source={{uri: image}}
                        style={{width: 300, height: 300}}
                    />
                }
            </View>
        );
    }
}

const styles = {
    containerStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    textStyle: {
        fontSize: 20,
        marginBottom: 20,
        textAlign: 'center',
        marginHorizontal: 15
    }
}

export default ImagePickerSample;

オプションが指定できるので、実際のアプリに実装する際は色々試してみて下さい。
画像のExif情報も取得することが出来ます。

詳細なオプションについては公式リファレンスを参照して下さい。

実行

それではアプリを実行してみます。

カメラを起動

実機のカメラを起動します。

シャッターを切ると、リテイクか使用するかどうかを聞かれます。

アプリのViewに撮った写真が表示されるはずです。

カメラロールから選択

「カメラロールから選択」を押すとカメラロールが立ち上がり、画像を選択することが出来ます。

指定したアスペクト比で調整する必要があるので、用途に応じてオプションを指定して下さい。

たったこれだけのコードで「カメラを撮る＞選択する」、「カメラロール起動＞選択する」機能がさくっと作れるのはありがたい。

今回のソースコードはこちらに置いています。
ykubot/image-picker-sample

まとめ

個人的にはreact-native-image-pickerよりも簡単に書けると思いました。初学者ならこちらから入ってもいいくらいです。

それにしてもネイティブの機能がどんどん使いやすくなって来てていい感じです。

Expo.ioにはもっと頑張ってもらいたい！

この調子でネイティブのコード全く書かずにアプリ開発出来る未来来て欲しいなー

React NativeおよびExpo.ioはこれからもウォッチしていきます。

それではまた。

参考

Expo SDK – ImagePicker