Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【React Native】React Nativeでカメラアプリを実装する

ここ最近、React Nativeを使ってネイティブアプリで使いそうな機能を一通り試すことが多くなってきました。

rennnosukesann.hatenablog.com

rennnosukesann.hatenablog.com

今回もネイティブ実装でよく使われる機能であるカメラ機能を試してみました。

実行環境は Mac OS X High Sierra / iOS 11(iPhone X)です。

Usage

create-react-native-appでプロジェクトを作成します。
ExpoのカメラUIコンポーネントを利用するので、追加でインストールするパッケージはありません。

$ npm install react-native-camera-app
$ cd react-native-camera-app

create-react-native-appについては下記記事参照。

rennnosukesann.hatenablog.com

Source

カメラビューを表示し、撮影も行えるアプリです(保存はつけてません)。 カメラ撮影後数秒間撮影した写真がモーダル上で表示されます。

CameraView.js
import React from 'react';
import { Text, View, Button, Modal, Image } from 'react-native';
import { Camera, Permissions } from 'expo';
import { timeout } from 'rxjs/operator/timeout';

export default class CameraView extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
    photo: null
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  setPhoto(photo) {
    this.setState({ photo: photo });
  }

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No acess to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera style={{ flex: 1 }} type={this.state.type} ref={cam => { this.camera = cam; }} />
          <Button style={{ flex: 1 }} title="snap!" onPress={photo => {
            if (this.camera) {
              this.camera.takePictureAsync().then(photo => {
                // カメラオブジェクト取得
                this.setPhoto(photo);
                // 三秒後にモーダルを閉じる
                setTimeout(() => {
                  this.setPhoto(null);
                }, 3000);
              });
            }
          }} />
          <Modal
            animationType="slide"
            visible={this.state.photo !== null}
            onRequestClose={() => {
              alert('Modal has been closed.');
            }}>
            <Image style={{ width: "100%", height: "100%" }}
              source={{ uri: this.state.photo === null ? "" : this.state.photo.uri }} />
          </Modal>
        </View>
      );
    }
  }
}
App.js
import React from 'react';
import CameraView from './CameraView';

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

Demo

f:id:rennnosukesann:20180609144721g:plain:w300

参考

Camera - Expo Documentation