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

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

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

react-native-navigationでRCCManager.h file not found.エラー

react-native

react-native-navigationを使ってみようとインストールしてみたが、

RCCManager.h file not found.とエラーになってしまい起動できなかった。。。

バージョン

  • react-native: 0.41.2
  • react-native-navigation: 2.0.0-experimental.256

エラーが出た手順

  1. yarn add react-native-navigation@next
  2. react-native link
  3. AppDelegate.mを変更

手順3.を終えた時点で、#import "RCCManager.h"の箇所がRCCManager.h file not found.エラーになってしまいシュミレーターも起動できない。。。

解決方法

公式のドキュメントはreact-native linkを利用せずに手動でライブラリをリンクさせている。

Installation iOS

この手順のHeader Search Pathsの箇所の対応をするとエラーが消えてシュミレーターも起動できるようになった。

In Xcode, in Project Navigator (left pane), click on your project (top) and select the Build Settings tab (right pane). In the Header Search Paths section add $(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure on the right to mark this new path recursive (screenshots)

おそらく公式の手順通りに手動リンクしていれば発生しなかったのだろう。。

jquery.validate.jsで2つあるsubmitボタンの内の1つのバリデーションを無効にする

Rails jQuery

もともと変更を行うformを作成していたが、そこで追加で別submitボタンで追加したかった。


ただ、何もしないと新しく追加した方のsubmitボタンを押してもvalidate.jsの入力チェックが効いてしまう。

※新しく追加した方は入力チェックをしたくない


validate.jsのドキュメントを読んでみたら、ちょうどいいオプションがあったのでそれで解決した。

Reference documentation | jQuery Validation Plugin

※formnovalidateを対象のsubmitボタンに設定するとそちらだけ入力チェックをスキップできる


Railsでsubmit_tagを使っていたので下記のように書いた。

<%= submit_tag "submit2", {formnovalidate: true} %>

React Nativeでrun-iosした時にPrint: Entry, ":CFBundleIdentifier", Does Not Existになってしまう問題

react-native

react-native run-iosを実行した時に下記のようなメッセージが表示されてしまい、アプリが起動しなかった。

XCodeでRunするとちゃんとアプリが起動する)

The following commands produced analyzer issues:
    Analyze Modules/RCTRedBox.m
(1 command with analyzer issues)

Installing build/Build/Products/Debug-iphonesimulator/アプリ名.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/アプリ名.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist


ググると下記のQiitaページがヒットするが、ちょっと今回の事象とは違う。

(RCTSRWebSocketのエラーは出てない)

qiita.com


もう少し調べてみると、react-nativeのissueでそれらしきものを発見。 下記のコメントの対応で解決した。

github.com

build/Build/Productsにするだけでなく、"Relative to Workspace"を選択するのがポイントみたい。

react-navigation

react-native

react-nativeのnavigation系のライブラリを探しているときに見つけた。

github.com

今年の1月末あたりに公開されたようで、ブログによるとEx-NavigationおよびReact NativeのNavigatorやNavigationExperimentalの置き換えを狙っているらしい。


まだ1.0.0-beta3なのでこれからだろうが、NavBarやTabBarの中でModal表示する場合にどうするかが分からなかった。(サンプルはホームからModal表示でNavBarやTabBar遷移するものだった)

StackNavigatorにmode: ‘modal'を渡せばModalになるが、ネストの中の定義は効かずトップに定義すると全てモーダルになってしまう。。

NavBarやTabBarの中でModalは普通にアプリを作っていると利用があると思うが、どうするのだろう。

Modalは別でReact NativeのModalコンポーネントを使う??

react-native-router-fluxでサンプル

react-native

配色とか超雑だけど、react-native-router-fluxのサンプル実装をした。

直近で必要そうなNavBar,TabBar,Modalの各遷移を公式のExampleを参考にした感じ。

github.com


ModalはSegueでいうpresent modallyな動きをして欲しかったが、合わせるには工夫が必要?みたい。

他にモーダル用のライブラリとかあるのかな?

追記 (2017/02/14 13:01)

他にreact-native-navigationというものがある。

example動かした感じでは、求めているものの動きはこちら。

github.com

でも、react-native 0.37.0までしかサポートしてないのか。。

追記 (2017/02/15 22:55)

ModalのScene定義の位置をtabsの中にしていたので、present modallyな遷移アニメーションになってなかったらしい。

修正したらちゃんと動いていたので、これで良さそう。(ソースも修正しました。)

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を追加しろとあったが、それはすでにあったのでやらなかった

英語学習についての振り返り

英語勉強 振り返り

今年の目標として懲りずにまた英語勉強を設定してみたが、ちゃんと振り返りをしないとこれまでと同じように失敗するので振り返る。

主に下記のことを1週間ちょっとやった。

  • Doulingo
  • リスニング
    • Podcast
      • 台本なし英会話レッスン

Keep

  • 空き時間での学習
    • 朝の始業まで、昼休み、帰宅時にやっている

Problem

  • 文法の基礎を学ぶ機会
    • Doulingoだとただ問題を解いて正解がどうかが分かるだけで、詳しい文法的な解説がない(見れる方法を知らないだけ?
    • Forestを持っているのでそれをやろうかと思う
      • まとまった時間がいるので、どう捻出するか?
  • 記憶に残りにくい
    • Podcastを聞いてがどうも記憶に残りにくい。説明や単語のメモを取るなど必要。

Try

Podcastや英英辞書で調べた単語をZuknowでメモ→復習のサイクルを試す


朝の通勤時間も英語学習に充てたいところだが、どうしてもrebuild.fmなどを聴いてしまう。。