react-nativeでiOSアプリを作ってみた時のエラーあれやこれ
初めて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を使うようにしたら解決した。
require(‘./images/’ + no + ‘.png’)のようなことはできない
公式にある通りrequire内で変数は使えない。
// 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が分かりやすかった。
実機でテストするときのエラー対応
まずはそのまま実機にビルドしようとするとエラーが出るので、下記を参考にしてTeamやTarget OSを指定した。
yoichirowatanabe.hatenablog.com
これで実機にはビルドできるがまだDebugモード?なので、起動が遅い。
なので、Productionとして実機で動かすときは公式にあるように、Releaseにする。(DefaultはDebugのはず)
しかし、これをしてビルドしようとしても下記のエラーが出てしまった。。。
ld: symbol(s) not found for architecture arm64 react-native
調べてみると下記のissueと同じようだった。
なので、ここにいくつか対応方法が書いてあったやつのDead code strippingをNoにするとビルドできた。
※アプリ名TestsにlibReact.aを追加しろとあったが、それはすでにあったのでやらなかった