Edited at

React Native - ScrollViewで内容を追加しても常に最下部を表示する方法

ScrollViewの内容を追加していくと

後に追加したものが隠れて見えなくなってしまいます。

デフォルトで勝手にスクロールするよってStack Overflowにあったりもしましたが

自分はうまくいかなかったのでソースで書いて頑張りました。


手順

①ScrollViewの高さを取得

②ScrollViewの中身の高さを取得

③上の2つの差を出してscrollToを実行


サンプルソース


main.js

・・・

handleContentSizeChange: function(ctwidth, ctheight) {
var height = this.state.scrollAreaHeight;
if (height == 0) {
return;
}
if (height < ctheight) {
this.refs.scrollView.scrollTo(ctheight-height);
}
},
・・・
render: function() {
return (
・・・
<ScrollView style={styles.scrollArea}
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
this.setState({scrollAreaHeight: height});
}}
onContentSizeChange={this.handleContentSizeChange}
ref="scrollView">

・・・


こんな感じです。

onLayoutでコンポーネントがセットされた時の高さが取得できるので

onContentSizeChangeで中身のサイズが変わった時に

scrollToしてあげます。