Q&A
前提・実現したいこと
React NativeでReact Navigationを利用しています。
TabNavigator(ボトムのナビゲーションの役割)の中にもうひとつスワイプ操作が可能なTabNavigatorを入れ子にしてスクリーンの切り替えをレイアウトが崩れることなく実現したいです。
環境
"react-native": "0.49.3",
"react-navigation": "^1.0.0-beta.13"
発生している問題
タイトル通り、入れ子になったTabNavigationの最初に表示される画面のレイアウトが崩れます。
TabNavigatorの中身のスクリーンは以下のようなコードになっており、Childを均等な幅で表示したいのですが、Childの中身のContentによって幅が均等になりません。
JSX
1<Parent style={{flex: 1, flexDirection: 'row'}}> 2 <Child style={{flex: 1}}> 3 <Content /> 4 </Child> 5 <Child style={{flex: 1}}> 6 <Content /> 7 </Child> 8 <Child style={{flex: 1}}> 9 <Content /> 10 </Child> 11</Parent>
最初に表示されるスクリーン以外のスクリーンも同様の構造になっており、こちらはコンテンツの中身に関わらず正しいレイアウトで表示されます。また、最初のスクリーンも再びrenderされると正しいレイアウトになります。
swipeEnabledのオプションをfalseにすると正しいレイアウトになるので、依存パッケージのAnimeted.Viewなどが怪しいのではと思い調査してみましたが原因はわかりませんでした。
原因や疑わしい部分に心当たりがありましたらコメントを頂けるとありがたいです。
回答1件
0
ChildのstyleにflexGrowを設定するとどうでしょうか？
投稿2017/11/21 07:55
総合スコア138
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。