【ReactNative開発】ScrollViewが動作しない?!

こんにちは。今日も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の違い

ReactNativeの公式Docの中に説明がありました。Flexは、コンテナの子コンポーネントも含めたスペースの使い方を定義できる、ということなのでしょうか。上のコードの例だと、ScrollViewの中にさらにMainComponentなるコンポーネントがあったので、Flexだとその中のスペースの使い方まで指定できないが、FlexGrowだとできるということ・・?

https://reactnative.dev/docs/flexbox

  • flex will 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.
  • flexGrow describes 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.

兎にも角にも、これで問題を解消することはできました・・・!Stylingもまだまだ勉強の余地がありそうです・・・

同じ現象で悩まれている方のお役に立ちましたら幸いです。また、下のいいねぼたんをポチっていただけると大変励みになります!

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。