ReactNativeだとカメラアプリくらいなら1時間で作れた

More than 1 year has passed since last update.


環境準備 :helmet_with_cross:

環境準備については、ReactNativeはじめの一歩(Create React Native App) に書きました。

最近React Nativeの門を叩いたばかりで手探り状態ですが、まずは一番それっぽいものを、と思い、カメラアプリを作ってみることにしました。

ExpoにAPIが用意されていたり、先人達がすでに試されていたりして、それを見ながら大変簡単に実装することが出来ました。(というかExpoのドキュメントまんまでですが)

なお、iosを前提としています(Android未確認)


カメラモジュール色々 :camera_with_flash:

調べてみると幾つかのモジュールが存在しているようです。


Expo.io SDK :iphone:

今回はExpo.io SDKを使って簡単なカメラアプリを試してみました。


出来ることイメージ :rocket:


  • メイン画面

image4.jpg


  • カメラとビデオ

image1.png


  • 位置調整

image7.png


  • 選択後のメイン画面

image3.jpg


  • ライブラリから選択

image3.jpg


コード :pencil:


App.js

import React from 'react';

import { Button, Image, View } from 'react-native';
import { ImagePicker } from 'expo'; // ...(1)

export default class ImagePickerExample extends React.Component {
state = {
image: null, // ...(2)
};

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

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Pick an image from camera roll"
onPress={this._pickImage}
/>
<Button
title="Enjoy Camera!"
onPress={this._camera}
/>
{image &&
<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
}
_camera = async () => { // ...(6)
let result = await ImagePicker.launchCameraAsync();

console.log(result)

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

};

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

console.log(result);

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



(1) コンポーネントのimport


  • まず冒頭で必要なコンポーネントを呼び出します。



    • Button
      ボタンのデザイン、文言、押下時の挙動など出来る


    • Image
      ローカルストレージや、ウェブ上の画像などを簡単に表示出来る


    • View
      UIを構築するための基本コンポーネント





(2) state初期化


  • 続いて、初期状態を指定します。

    このstateというのは変化しうる状態を表すのに使われる変数です。もうひとつpropsという、ランタイムで不変な変数と共に語られています。


(3) render


  • 次に、JSXをレンダリングするrender関数を作成します。


(4) imageの状態保存

imageには現在の状態を代入します。

この let {var} = this.obj という書き方はオブジェクトの分割代入という構文で、this.stateimage というプロパティが自動的に let image にセットされます。


(5) Viewを記述します

Viewにはstyleが指定出来き、View Style Props

Layout Props あたりを指定できます。 flexを使用すると、さまざまな画面サイズで一貫したレイアウトを描画することが出来ます。

Buttonも同様で、色や押下時のコールバックなんかを指定できるようです。

また、imagenullでなければ<Image>コンポーネントで描画します。

初期はnullですが、端末のライブラリから画像を選択したり撮影をした後に実行される、

    if (!result.cancelled) {

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

で、端末の画像のURI(file:///var/mobile...)が代入されています。

スタイルについてはいずれも、html/cssと遠くない記述ができるので、直感的に実装できそうです。


(6) 具体的な処理追加

次に、カメラ、画像選択時の具体的な処理を書いていきます。

カメラ -> ImagePicker.launchCameraAsync

画像選択 -> ImagePicker.launchImageLibraryAsync

これらで、async/awaitを利用して非同期関数を定義します。

  _pickImage = async () => {

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


  • allowsEditing

    画像/ビデオを選択した後に編集するためのUIを表示するかどうか

  • aspect

    編集時の縦横比。Androidのみ適用され、iPhoneは正方形になる


簡易的なPUBLISH

Expo XDEを使うと、作ったアプリをウェブ上に簡易的リリースできます。publishを押すとしばらく経って

19:33:53 Published to https://exp.host/hogehoge/cameraapp

という風にURLが発行されます。

screen.png

このURLを共有すると、Expo Client Appをインストールした端末で共有できますので簡単に人に自慢でき、おー、という反応にテンションが上がります。

以上、「試してみた」風の基本的な内容で恐縮ですが、 React Nativeで出来る事の概要がざっくり伝われば幸いです。


参考にさせて頂きました :pray_tone1:

React Native

Expo

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

React における State と Props の違い

[JavaScript] 変数名が中括弧で囲まれた変数宣言

async/await 入門(JavaScript)

React Nativeのデザイン - Stylesheet/Flexbox (part1)