React Nativeでビューのコーディング
#前回まで
react-native-scrollable-tab-viewを導入するところまでできた。各タブのviewを作りこんでいく。
#tabのviewをつくる
たぶの画面をトップレベルのviewで埋めたいのだけどなかなかできない。異なる背景色をつけて、ひたすら広がりを確認する。しかし、childの範囲しか広がらない。flexでmxml書いてたときもコレ同じことやってた記憶がよみがえる。
そうそうこんな感じにしかならない。
このあたりを参考にしながら。この記事自体は学べること多かったけど、react-native-scrollable-tab-viewと一緒に使うとなかなか思い通りにならない。`flex: 1`にすればいいんじゃないのかよ、っとおもって、サンプルごっそり移植するもやっぱり同じなので、これ原因は別のところだと思って調べてみると、本家ドキュメントで原因がわかった。なるほど。
`Keep in mind that ScrollViews must have a bounded height in order to work`
#ScrollViewのstickyHeaderIndicesの挙動
なんかおかしいなー。固定されてくれないし。
#requireについて
`var { Icon, } = require('react-native-icons');`
と
`var Icon = require('react-native-icons');`
の違いについて。
#ScrollableTabViewのchildsの最大の大きさに他も影響を受けてしまいそう
ScrollViewでないタブもスクロールバーが出現してしまう現象が発生。ScrollableTabViewの直下にheightが大きな子がいたらそのheightの影響をうけているような挙動。
Viewでラップして、Viewのheightを統一した。ListViewをラップした箇所で、Warningが発生。
`Warning: ScrollView doesn't take rejection well - scrolls anyway`
関連してそうなissueがこちら。まだ対策はなさそう。一旦無視する。
#タップで別Viewを出す
`TouchableHighlight`と`Navigator`をつかえばいいかな。`TouchableHighlight`のmouse_down時のいろは`underlayColor`で変えられる。
onPressなどで、Navigatorの参照をどう得るかについて悩んだが、とりあえずrefをつかってしまった。あまりよくなさそうではある。
次のsceneが下から浮かび上がるようにしたい。
`Navigator.SceneConfigs.FadeAndroid`でいけた。
これネーミングどうなの。。。
TabBarのなかで、別sceneが開いてしまう。あたりまえか。これTabBarまで被せるにはModalつかうしかないか？
issueにもあがってた。
#cssで円をつくる
#`flex: 1`なviewの子をabsolute配置
```
wrapper: {
flex: 1,
backgroundColor: '#FF0000',
},
bar: {
position: 'absolute',
flexDirection: 'row',
bottom: 0,
right: 0,
left: 0,
height: 40,
backgroundColor: '#000',
},
```
