0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ReactNativeでiosアプリを作るメモ

Last updated at Posted at 2020-05-06

iOSとAndroid両方のアプリを作れるReactNativeですが、エミュレータ起動の方法とか気をつけるところを忘れてしまっていたので、自分用にメモを残します。

ReactNative

ご存知かと思いますが、ReactNativeはモバイルアプリケーションフレームワークです。
Reactのような書き方でiOSやAndroidのネイティブアプリを作ることできます。
利点は上記で、欠点は用意されてない端末の機能を使うAPIを自分で用意する必要があるところです。

端末の機能を使うAPIはある程度用意されてますが、マイナーなAPIはAndroidJavaやObjectiveC(SwiftもObjectiveCが必須)を使って自分で書く必要があります。

エミュレータでアプリを起動

ドキュメントを読むと、プロジェクトディレクトリで下記のコマンドを実行する

npx react-native run-ios --simulator="iPhone 5s"

iPhone5sの部分はエミューレータで使う端末名になります。

※ちなみに私は上記のコマンド実行時に下記のエラーに遭遇し、ここに載っている方法で解決しました。

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.60.dylib

実機でアプリを起動

ドキュメントを読むと、

0.ios developerアカウントに登録(有料)
1.iosディレクトリでxcodeプロジェクトを開く
2.GeneralタブでSigninの設定をする(developerアカウントの選択)
3.buildとrunを実行

xcodeを使ったことがある人はハマらない箇所かと思います。

buildエラー対応

遭遇したエラーと対処法を記録

エラー1

Module {module名} does not exist in the Haste module map 

エラー2

Getting this error: error: bundling failed: Error: Unable to resolve module `{module名}`

エラー3

npm ERR! code EISGIT
...

このあたり、モジュールのバグもあるが、基本キャッシュを消す下記の操作で解消

watchman watch-del-all

rm -rf node_modules && npm install

rm -rf /tmp/metro-bundler-cache-* 

npm start -- -- reset-cache

rm -rf /tmp/haste-map-react-native-packager-*

ただ、この次のエラーで2日使っても、解消方法がわからず、あきらめました

Native module cannot be null

次のアプリからはExpo使います( ´ ▽ ` ;)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?