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

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

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

2017年の抱負というか意気込みというか

これまで目標や抱負などというものをあまり公言してこなかったので、動機付けというか自分を鼓舞するために書いておこうと思う。


ざっくりと今年の抱負は下記のような感じ。

  1. アウトプット
  2. 個人開発
  3. 自分を知る
  4. 英語
  5. プログラミング言語

アウトプット

主にはブログ。去年の下書き状態のまま記事がたくさんあるので、今年はあまり溜めずに。

まずは月2くらいの更新頻度を目指す。


もう1つは勉強会などで発表する機会を増やすこと。

人前での発表を今まで超苦手にしてきたので、まずは社内勉強会とかからやっていく。

個人開発

自分は0→1でものを作るのがとても楽しくワクワクするというのと、あまり仕事でサービスの運用を経験できないので自分でサービスを作って運用もしてみたい。 あと自分のポートフォリオのようなものとして。


とりあえず、今作ってるアプリの超最低限の機能が年末あたりでできたので今、環境やデプロイ自動化を準備しているところ。

既存サービスやデザインをどうこう考え出すと途中で挫折するので、とりあえず作って公開をする。

デザインとか最悪お金で解決すればいいし。

と言いつつも、お小遣いパパエンジニアなので資金は全然潤沢ではないので、費用を抑えた運用やサーバ代くらいは賄えるマネタイズは考えておきたい。

自分を知る

世の30歳になるエンジニアは、これからの自分の生存戦略に迷うようで自分も例外ではなかった。

現在SI系で働いているが、Web系にもすごく憧れがありチャレンジしてみたい思いもある。

しかし、転職準備するときに自分の強みやこれからのキャリアパスなどが具体的に出てこなかったので、転職するしないはともかくとしてこれからの自分の方向性をしっかり考えておかないとなと思った。

月1でこのあたりは考えて、ブログにもまとめておきたい。

英語

これはここ2,3年ほど思っているがなかなかものにならない、というか続かないので今年はより具体的に。

目的

まず、なんで英語ができるようになりたいかというと、エンジニアによくある海外のIT系情報を原文のまま読めるようになりたい！と言ったもの。

自分の欲しい情報とかはある程度英語サイトも見るようにしているが、なんとなくの雰囲気やgoogle翻訳に頼っているので。

やること

  • Doulingo
    • 通勤時の隙間時間に基礎系を
  • Rails CastなどのIT系の英語動画を見る
    • 技術系ならとっつきやすいと思っている
      • 以前ニュースやスポーツ系のpodcastとか手を出したが全然続かなかった・・・
    • 気になった言い回しやわからない単語をメモっておく
  • TOEIC受ける
    • 今まで英検すら受けたことないので今年は受けて見る
    • 高校英語は落ちこぼれの部類だったので、とりあえず500点を目指す
      • おそらく、今すぐ受けても300点いくかどうかのレベルかな？
    • 5月あたりに1度受ける

しばらくはまとまった時間はサービス開発に充てたいので、通勤時間や昼休みなどの隙間時間を使ってやる。

プログラミング言語

去年はSwiftを少しやっていた。（先の個人開発でWebViewなアプリを作っているのもあって）

今年は下記の言語に興味あるのでどれか手を出したい。