読者です 読者をやめる 読者になる 読者になる

30歳パパエンジニアのアウトプット帳

30歳に突入した1児のパパエンジニアのブログ

react-nativeでiOSアプリを作ってみた時のエラーあれやこれ

react-native

初めてreact-nativeでiOSアプリを作ってみた。

メディアプレイヤーアプリのようなもの。

(個人利用目的でアプリストアでは公開してない)

利用したライブラリ

  • react-native-fs
  • react-native-vector-icons
  • react-native-video
  • react-native-video-player

遭遇したエラー

react-native-videoでビルドエラー

普通にnpm installでreact-native-videoをした場合にビルド時エラーが出たので、下記のIssueにあるようにmasterを使うようにしたら解決した。

github.com

require(‘./images/’ + no + ‘.png’)のようなことはできない

公式にある通りrequire内で変数は使えない。

facebook.github.io

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

しかし、sourceにはrequireの他に{uri: ‘パス’}を引数に渡せ、こちらだと変数を使える。

今回はiTunesのファイル共有を利用することにしたので、react-native-fsを利用してファイルの絶対パスを指定している。

※react-native-fsを利用するとRNFS.DocumentDirectoryPathでアプリのDocumentsフォルダの絶対パスが取得できる

もしソースコード内のファイルの場合に{uri: ‘file://./images/test.png’}のような相対パスでの指定はできるのだろうか?別の機会で検証してみたい。


また、iOSアプリのディレクトリ構成は下記のQiitaが分かりやすかった。

qiita.com

実機でテストするときのエラー対応

まずはそのまま実機にビルドしようとするとエラーが出るので、下記を参考にしてTeamやTarget OSを指定した。

yoichirowatanabe.hatenablog.com

これで実機にはビルドできるがまだDebugモード?なので、起動が遅い。

なので、Productionとして実機で動かすときは公式にあるように、Releaseにする。(DefaultはDebugのはず)

facebook.github.io

しかし、これをしてビルドしようとしても下記のエラーが出てしまった。。。

ld: symbol(s) not found for architecture arm64 react-native

調べてみると下記のissueと同じようだった。

github.com

なので、ここにいくつか対応方法が書いてあったやつのDead code strippingをNoにするとビルドできた。

※アプリ名TestsにlibReact.aを追加しろとあったが、それはすでにあったのでやらなかった