React-Nativeでカメラ起動してみた

React-Nativeで端末にアプリを落として、カメラ起動するところまでやってみました。

今回のアプリで使用したいツールは以下の

React-Native-Camera

を使用したいと思います。

参考サイト

インストール

以前上げた記事を見ながら、プロジェクトを作成します。

$ react-native init test2

その後作成したプロジェクトのディレクトリに移動して、以下を実行します。 以下のコマンドは、今回使用するReact-Native-Cameraの README に記載されている Mostly automatic install with react-native になります。

$ cd camera-test
$ npm install react-native-camera --save
$ react-native link react-native-camera

↑のコマンドを実行すると、以下のエラーが出ました。

Command `link` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

npm installしなさいよと。なので、実行します。

$ npm install

再度実行すると、うまくいきました。

$ react-native link react-native-camera
Scanning folders for symlinks in /path/to/test2/node_modules (20ms)
rnpm-install info Linking react-native-camera android dependency 
rnpm-install info Android module react-native-camera has been successfully linked 
rnpm-install info Linking react-native-camera ios dependency 
rnpm-install info iOS module react-native-camera has been successfully linked 

コード修正

今回はiOSで実行してみようと思います。

plistファイル修正

まずplistを修正します。

test2/ios/test2/Info.plistを開いて以下を追加します。

    <key>NSCameraUsageDescription</key>
    <string>Your message to user when the camera is accessed for the first time</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Your message to user when the photo library is accessed for the first time</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Your message to user when the microphone is accessed for the first time</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>Your message to user when the photo library is accessed for the first time</string>

それぞれ、意味があります。

  • NSCameraUsageDescription

    カメラへのアクセス

  • NSPhotoLibraryUsageDescription

    フォトライブラリへのアクセス

  • NSMicrophoneUsageDescription

    マイクへのアクセス

  • NSPhotoLibraryAddUsageDescription

    フォトライブラリへのアクセス(こちらはiOS11以降で必要になったようです)

string部分は、端末で表示する注意文言となります。

App.jsファイル修正

test2/App.jsの中身をREADMEのサンプルコードに移し替えます。

サンプルコード

XCodeでの編集

今回iOSで確認する予定ですので、端末で確認するためにはXCodeからビルドする必要があります。

なので、test2/ios/にある、 test2.xcodeproj を開きます。

そして、ビルド先を添付画像のように、端末に設定します。

f:id:kojirooooocks:20180103020945p:plain

ビルドしてみましょう。

f:id:kojirooooocks:20180103021006p:plain

ビルド失敗しました。。。 確認してみます。

f:id:kojirooooocks:20180103021021p:plain

プロビジョニングプロファイルの指定がなかったために出てたエラーのようです。

以下を修正して対応しました。

f:id:kojirooooocks:20180103021040p:plain

エラーも消えたので再度ビルドしてみると、端末にアプリを落とすことが出来ました。

ただ、ビルドされたアプリではエラー画面が表示されていました。

f:id:kojirooooocks:20180103021055p:plain

色々と調べていたのですが、こちらのissueの内容で、解決しました。

class BadInstagramCloneApp extends Component {

の箇所を

export default class BadInstagramCloneApp extends Component<{}>

に変更しました。

再度実行してみます。

f:id:kojirooooocks:20180103021112j:plain

問題なく写真が取れて、画像を保存できました!!

たのしー!!

ただ、実際理解していくにはReact.jsの知識が必要そう。。。

なんとなくJSを使ってきた自分にとって、勉強すべき課題が見つかったいい振り返りになりました。