俺が求めてるボタンはTouchableHighlightじゃない

with コメントはまだありません

ReactNativeではボタンを作る時にTouchableHighlightを使う。
デフォルトでは押した時にunderlayColorで指定した色が背景に表示される。
こんな感じ。
f:id:deeptoneworks:20160923205340g:plain

おかしいやん。誰が求めてるの?テキストじゃなくて画像のボタンだったらいいんだけどね。

求めてるのはiOSのデフォルトのボタンみたいに、テキストがハイライトするやつ。
こんなやつ。
f:id:deeptoneworks:20160923205747g:plain

これを作るのが若干めんどい・・・。
TouchableHighlightコンポーネントじゃ実装できないので、TouchableWithoutFeedbackコンポーネントを使う。
これは名前の通り、デフォルトのままでは押しても何の反応も示さない。
このコンポーネントのonPressInとonPressOut propsをいじってテキストがハイライトするように実装する。

f:id:deeptoneworks:20160923210513g:plain

でーきた。
ほんまにこんな実装でええんか・・?

やってる事は単純で、ボタンを押した時と離した時でisHighlight statusを切り替えて、this._textColor()で渡されるスタイルを切り替えている。
やりたい事は凄いシンプルなのに、若干めんどいなあ。。

ちなみに、TouchableHighlightコンポーネントは直下の子にTextとかImageコンポーネントを持ってこれるけど、TouchableWithoutFeedbackはダメっぽい。
Viewでラップしてあげましょう。

(追記)
こんな感じのコンポーネントにしたよ

ReactNative Flexboxまとめ(殴り書き)

with コメントはまだありません

React-Nativeを使ったアプリケーション開発にはFlexboxの理解が不可欠。
だから適当にまとめる。

flex

これで画面いっぱいにコンポーネントが表示される。
同じレベルにflex:1を指定しているコンポーネントが2個あったとしたら1:1の割合で表示される。
片方が1で片方が2なら1:2の割合。

flexDirection

縦並び(=column)か横並び(=row)か。デフォルトはcolumn。
あと、ReactNativeではcolumn-reverseとかrow-reverseは効かんっぽいなあ。

flexWrap

nowrapで単一行、wrapで複数行。デフォルトはnowrap。
nowrapの時は要素がはみ出ても横一行or縦一行で表示しようとする。
wrapの時は折り返す。

justifyContent

コンポーネントの配置方法を指定。

flex-start
縦並びの場合は上から、横並びの場合は左から子コンポーネントを配置する。 (デフォルト)

flex-end
縦並びの場合は下から、横並びの場合は右から子コンポーネントを配置する。

・center
中央に子コンポーネントを配置する

・space-between
一番左と一番右(or一番上と一番下)に子コンポーネントを配置して、
残りの子コンポーネントを均一のスペースが空くように配置する。

・space-around
space-betweenと同様均一のスペースを空けて子コンポーネントを配置する。
ただし、一番左と一番右(or一番上と一番下)のコンポーネントにも隙間が出来る。

alignItems

縦並びなら「左」、横並びなら「上」を基準に子コンポーネントを揃える。
(justifyContentとは軸が逆)

・stretch(デフォルト)
コンポーネントを表示範囲に伸ばして配置する。

flex-start
縦並びなら左、横並びなら上に子コンポーネントを揃える

flex-end
縦並びなら右、横並びなら下に子コンポーネントを揃える

・center
中央に子コンポーネントを揃える。

alignSelf

コンポーネントで指定した「alignItems」を子コンポーネントで上書きする。
指定できる値はalignItemsと同じ。

flexを使用せず画面一杯に表示

こんな感じで画面サイズが取れる。

React-Reduxメモ

with コメントはまだありません

アクションの追加

定数でActionの種類を定義する。
ReducerはActionの種類を見てどのような状態を返すのかを決定する

ActionはActionCreater経由で発行する。
connectを用いると自動的に適切なReducerにActionが渡される。

Reducer

発行されたActionを受け取り状態を返す。
新しい状態を返さないと再レンダリングされないので注意。

複数のReducerをまとめる(今は1個)

最上位のコンポーネントを作る

Reducxにおいてストアはただ1つだけ。

作成したActionをマッピング

これでActionを発行したら自動的にReducerへ渡されるようになる

Reducerから受け取るStateをPropsにマッピング

新しいStateを受け取ると該当のPropsを用いているコンポーネントを再レンダリングしてくれる。