Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@overgoro56

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

More than 1 year has passed since last update.

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

8
Help us understand the problem. What is going on with this article?
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
overgoro56
最近はフロントエンジニアとしてReact + Redux + TypeScriptで開発 GCP環境構築したりGASで業務改善したり ReactNativeで作った自作アプリも公開中

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?