Edited at

[React Native]ScrollViewにFlexBoxを適用するとスクロールしてもすぐに初期位置に戻ってしまう


はじめに

最近react nativeを触りはじめて、scroll viewの実装時にタイトルの通りつまずいたので記事にしておく。


スクロールしてもすぐに初期位置に戻る

以下のサンプルコードのようにScrollViewにflexを適用するとスクロールしてもすぐに初期位置に戻ってしまう。


サンプルコード

// App.js

import React, { Component } from 'react';
import {
StyleSheet,
View,
ScrollView
} from 'react-native';

export default class App extends Component {
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
</ScrollView>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
item: {
height: 200,
width: '90%',
marginTop: '30',
backgroundColor: 'orange',
}
});


解決策


ScrollViewの高さを動的に変化させる

flexではなくflexGrowを使うことでFlexBoXを適用したScrollViewの高さを動的に変化させることができる。

この記事を参考にしました。

https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

// App.js

const styles = StyleSheet.create({
container: {
flexGrow: 1, //修正箇所
alignItems: 'center',
},
item: {
height: 200,
width: '90%',
marginTop: '30',
backgroundColor: 'orange',
}
});


おわりに

これで無事にスクロールできるようになりました。

あとでスクロールしている動画も入れておこう。