8
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated 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してあげます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
8
Help us understand the problem. What are the problem?