React-Nativeで端末にアプリを落として、カメラ起動するところまでやってみました。
今回のアプリで使用したいツールは以下の
を使用したいと思います。
参考サイト
- https://teratail.com/questions/51057
- https://github.com/Polidea/react-native-ble-plx/issues/98
- https://github.com/facebook/react-native/issues/16332#issuecomment-336925116
- https://dev.classmethod.jp/smartphone/iphone/ios10-privacy-data-purpose-description/
- https://qiita.com/Takumi_Mori/items/ce58f3978cfa93302b72
インストール
以前上げた記事を見ながら、プロジェクトを作成します。
$ 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 を開きます。
そして、ビルド先を添付画像のように、端末に設定します。
ビルドしてみましょう。
ビルド失敗しました。。。 確認してみます。
プロビジョニングプロファイルの指定がなかったために出てたエラーのようです。
以下を修正して対応しました。
エラーも消えたので再度ビルドしてみると、端末にアプリを落とすことが出来ました。
ただ、ビルドされたアプリではエラー画面が表示されていました。
色々と調べていたのですが、こちらのissueの内容で、解決しました。
class BadInstagramCloneApp extends Component {
の箇所を
export default class BadInstagramCloneApp extends Component<{}>
に変更しました。
再度実行してみます。
問題なく写真が取れて、画像を保存できました！！
たのしー！！
ただ、実際理解していくにはReact.jsの知識が必要そう。。。
なんとなくJSを使ってきた自分にとって、勉強すべき課題が見つかったいい振り返りになりました。
