こんにちは。今日もReact Nativeを使った開発です。
本日は、React NativeのScroll Viewに関するとラブルシューティングです。
それでは参ります。
問題
以下のようなコードを書いて、画面をScroll可能にしたはずが、スクロールできない
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={{flex:1,justifyContent:'center'}}>
<MainContent {...props}/>
</ScrollView>
</View>
);原因と解決方法
このStack Overflowが助けてくれました。
https://stackoverflow.com/questions/38137388/scroll-view-inside-view-not-working-react-native
ScrollViewに指定するStyleで、flexではなくflexgrowを指定すると動きました！
というわけで、これを機にflexとflexgrowの違いについても勉強しておきたいと思います。
FlexとFlexGrowの違い
兎にも角にも、これで問題を解消することはできました・・・！Stylingもまだまだ勉強の余地がありそうです・・・
同じ現象で悩まれている方のお役に立ちましたら幸いです。また、下のいいねぼたんをポチっていただけると大変励みになります！
おしまい
ReactNativeの公式Docの中に説明がありました。Flexは、コンテナの子コンポーネントも含めたスペースの使い方を定義できる、ということなのでしょうか。上のコードの例だと、ScrollViewの中にさらにMainComponentなるコンポーネントがあったので、Flexだとその中のスペースの使い方まで指定できないが、FlexGrowだとできるということ・・？
https://reactnative.dev/docs/flexbox
flexwill define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element’s flex property.flexGrowdescribes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.