React NativeプロジェクトをiOSの実機で確認する(Expo未使用)

2018.12.05

Expoは使わずにReact Nativeの開発を行いたい

Getting Startedから始めるが、このときに「Quick Start」のタブだとExpoを使った構成になる。今回は「Building Projects with Native Code」のタブの手順で進めてみる。

必要パッケージをインストールする

Node.jsとwatchmanが必要になる模様。以前トライしたときに入れたのか、両方とも既に入っていた。

  • Node.js v10.4.1
  • watchman 4.9.0

React Native CLIをインストールする



$ npm install -g react-native-cli
$ ndenv rehash

# 確認
$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

$ ndenv rehashを実行してなくて、インストールしたはずのreact-nativeコマンドが-bash: react-native: command not foundとなってしまって少し焦った。

React Nativeプロジェクトを作成する



$ react-native init AwesomeProject

This will walk you through creating a new React Native project in /Users/tetsushi/projects/react_native/AwesomeProject
Using yarn v1.3.2
Installing react-native...
yarn add v1.3.2
(node:73778) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...

(アイコンがかわいい)

iOSでアプリを起動してみる



$ cd AwesomeProject
$ react-native run-ios

あれ、エミュレーターが起動するの...?!

react-nativeコマンドを使ってReact Nativeプロジェクトを作る

$ react-native run-iosを実行したターミナルはそれから数分に渡って勝手に動き続けて、5分くらい経った後にようやくエミュレーター上でアプリが起動した。

react-nativeコマンドを使ってReact Nativeプロジェクトを作る

iPhone XS(実機)でアプリを起動してみる

Running On Device

iPhone XSをmacに接続して、こちらの記事の手順でXcodeからアプリを起動してみる。



$ open ios/AwesomeProject.xcodeproj

react-nativeコマンドを使ってReact Nativeプロジェクトを作る

Xcodeを開いてみたら既にエラーが出ている。Signingの部分は毎回結構苦しめられているので見慣れているだけ多少マシかも。

「Automatically manage signing」にチェックを入れない場合はApple DeveloperのサイトからApp IDを取得して、プロビジョニングプロファイルを作成して〜とやるのだが、ローカルでサクッと試すだけなのにそんなに面倒なステップは必要ないはず(勘)。そもそも、「Automatically manage signing」なんて項目があるんだからそれを使いたい。

「Automatically manage signing」にチェックを入れたまま、「Team」を変更してみた。

エラーは消えたものの、再生マークを押してもエラーが消えず実機で実行できない。

Googleで色々検索して、

  • Product -> Clean Build Folderを実行する
  • Build Settingsを変更してみる
  • Teamを色々変更してみる
  • Automatically manage signingをつけたり外したりしてみる

などなど試しまくっていた中目に入ったのが以下のコメント。

Well, after I did all those things I still got the errors so I closed Xcode and opened it up again and then it worked. https://stackoverflow.com/questions/39524148/requires-a-development-team-select-a-development-team-in-the-project-editor-cod

そんなまさか、、、と思いつつXcodeを再起動したらあっさり実機で動いた。なんなんだよ...😂😂

react-nativeコマンドを使ってReact Nativeプロジェクトを作る