Nativeを初めて10日ほどが立ちました。画面デザインが難しいですね。時には隠れてしまうケースもあります。layoutを諦めて、固定ピッチで画面デザインをしてやること。固定ピッチと言っても、デバイスの画面サイズを判定して、ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さというのを計算で求めてやるのが、一番スマートかなという気がしています。そこで、デバイスの向きが縦向きから横向きに変化、その逆、両方に対応してどんなロジックを書けばいいか考えてみました。Viewを1つレンダリングしてやるようなイメージです。onLayoutというイベントがありますので、こいつを使います。こいつと、Dimensionsから求められるデバイスの画面サイズを組み合わせて、ヘッダー・フッター・メインコンテンツの高さを計算します。setStateなんかを使って、設定してあげて、画面を再描画すればOKです。日本語で書くとあっさりしてますが、実際実装するとなるとそれなりにコードを書かなきゃなりません。〜動作イメージ実際にうまく計算できると、こんな感じになります。実際にこんなロジックを実装しないといけないのかどうかよく分かっておりません。軽く調べた感じでは、方法はなさそうなので、ゴリゴリ計算して求めちゃう方法が、一番手っ取り早い気がします。スマートな方法があれば、じゃんじゃんコメントください。Nativeのデバッグ環境作成2017年9月7日こんにちは。いやいや、まるまる一日使ってしまいましたよ。デバッグする環境を作るのに四苦八苦してなんとか解決した顛末をざっくり書いておきます。記述があったので、開発はUbuntuでしましょうね。Skylakeを泣く泣く使おうかと思いましたよ。ハイスペックマシンが利用用途無しとなるところでした。Nativeでカメラロールをいじる方法がわからなかったので調べました。ついでに、一覧表示した画像から、複数ファイルを選択し、axiosでアップロードするところまでを紹介します。サーバーサイドはRailsで受け取るソースをのっけておきます。最後に全ソースを貼り付けます。説明は部分部分かいつまんで行います。"react-native"componentDidMountで一覧を取得し、Stateにセットします。dockerを使って、Rails(サーバーサイド)の環境を1つ、React(node)(クライアントサイド)の環境を1つ作る。両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。自体触るのが初めてだったので、基本的なことから記載しておきます。加えて初心者なので、間違えがあったらごめんなさい。docker自体のインストールはあちこちに記載されているので、そちらを参照ください。ubuntuのイメージを検索します。Webpackを使って、Sassをコンパイルする方法です。実際に動いた例を示しておきます。ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。--save-devこんな感じのフォルダツリーにsassがあると仮定します。webpack.config.jsを以下のような内容で作成します。Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。Reactのことは分かっている前提ですすめますので、あしからず。ファイルをドロップする場所があり、その右側にドロップされたフ...ReactでSPAを作り、Twitter認証(OAuth)でログインする。GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。なんかは使えそうにない。前回のGoogle編に続き、今回はTwitter編。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。実装のエキス部分だけを記載してみます。Developerにア...ReactでSPAを作り、Google認証(OAuth)でログインする。GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。なんかは使えそうにない。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。実装のエキス部分だけを記載してみます。React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。なるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。React-Routerは古いようで、React-Router-Domにしてみました。date*日本語が含まれない投稿は無視されますのでご注意ください。Ryzenで使用時に定期的にフリーズする。64bitで使えるようにする。Ryzenで使用時に定期的にフリーズする。64bitで使えるようにする。