ScrollViewを一番下までスクロールしたままにすることは可能ですか？

Question 1

チャットのようなアプリの場合、ScrollView最新のメッセージが古いメッセージの下に表示されるため、コンポーネントを一番下までスクロールしたままにしておきます。のスクロール位置を調整できますScrollViewか？

Question 2

以下のためにネイティブ0.41を反応させ、後に、あなたがこれを行うことができます内蔵のscrollToEnd方法：

<ScrollView
    ref={ref => {this.scrollView = ref}}
    onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}>
</ScrollView>

Question 3

onContentSizeChangeを使用して、スクロールビューの下部Y（高さ）を追跡します

https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange

var _scrollToBottomY

<ScrollView
    onContentSizeChange={(contentWidth, contentHeight)=>{
    _scrollToBottomY = contentHeight;
    }}>
</ScrollView>

次に、次のようなスクロールビューの参照名を使用します

this.refs.scrollView.scrollTo(_scrollToBottomY);

Question 4

これが私が集めることができる最も簡単な解決策です：

 <ListView
ref={ref => (this.listView = ref)}
onLayout={event => {
    this.listViewHeight = event.nativeEvent.layout.height;
}}
onContentSizeChange={() => {
    this.listView.scrollTo({
        y: this.listView.getMetrics().contentLength - this.listViewHeight
    });
}}
/>;

Question 5

フックを使用できる関数コンポーネントを作成する人にとっては、

import React, { useRef } from 'react';
import { ScrollView } from 'react-native';

const ScreenComponent = (props) => {
  const scrollViewRef = useRef();
  return (
    <ScrollView
      ref={scrollViewRef}
      onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
    />
  );
};

Question 6

このソリューションを試してください

xcode 10.0

RN：56.0.0

<ScrollView ref="scrollView"
             onContentSizeChange={(width,height) => this.refs.scrollView.scrollTo({y:height})}>  </ScrollView> // OR height -  width

Question 7

2020年以降の誰かが、機能コンポーネントを使用してこれを実現する方法を考えている場合に備えて。これは私がした方法です：

ref={ref => scrollView = ref }
onContentSizeChange={() => scrollView.scrollToEnd({ animated: true })}>

Question 8

react-native-invertible-scroll-viewモジュールを使用してスクロール/リストビューを反転し、を呼び出すだけでref.scrollTo(0)一番下までスクロールできます。

モジュールをインストールします。

npm install --save react-native-invertible-scroll-view

次に、コンポーネントをインポートします。

import InvertibleScrollView from 'react-native-invertible-scroll-view';

次に、ScrollView：の代わりに次のJSXを使用します。

<InvertibleScrollView inverted
    ref={ref => { this.scrollView = ref; }}
    onContentSizeChange={() => {
        this.scrollView.scrollTo({y: 0, animated: true});
    }}
>
    { /* content */ }
</InvertibleScrollView>

これreact-native-invertible-scroll-viewは、ビューのコンテンツ全体を反転するために機能します。ビューの子も通常のビューとは逆の順序でレンダリングされることに注意してください。最初の子は下部に表示されます。

Question 9

実際、@ Aniruddhaの回答は、使用"react-native": "0.59.8"しthis.scrollView.root.scrollToEndていて未定義であるため、機能しません。

しかし、私はそれを理解し、これは機能します this.scrollView.scrollResponderScrollToEnd({animated: true});

これを使用している場合、0.59.8またはそれ以降のバージョンを使用している場合、これは機能します。他の人が問題を起こさないように、この回答にバージョンを追加してください。

完全なコードはこちら

<ScrollView
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollResponderScrollToEnd({animated: true});
    }}>
</ScrollView>

Question 10

この方法は少しハッキーですが、私はより良い方法を見つけることができませんでした

まず、ScrollViewに参照を追加します。
次に、ScrollViewタグを閉じる前に、ダミーのビューを追加します
そのダミービューのy位置を取得します
下にスクロールしたいときはいつでもダミービューの位置にスクロールしてください

var footerY; //Y position of the dummy view
render() {    
    return (
      <View>
          <ScrollView 
          ref='_scrollView'>
            // This is where all the things that you want to display in the scroll view goes
            
            // Below is the dummy View
            <View onLayout={(e)=> {
              footerY = e.nativeEvent.layout.y;
              }}/>
          </ScrollView>
              
          //Below is the button to scroll to the bottom    
          <TouchableHighlight
            onPress={() => { this.refs._scrollView.scrollTo(footerY); }}>
            <Text>Scroll to Bottom</Text>
          </TouchableHighlight>
        
      </View>
    );
  }

スニペットを展開

Question 11

これはあなたの質問に答えます：https： //stackoverflow.com/a/39563100/1917250

コンテンツの高さからscrollViewの高さを引いたものを計算して、ページの一番下まで常にスクロールし続ける必要があります。

Question 12

TypeScriptを使用する場合これを行う必要があります

interface Props extends TextInputProps { 
     scrollRef?: any;
}

export class Input extends React.Component<Props, any> {
     scrollRef;
constructor(props) {
    this.scrollRef = React.createRef();
}
<ScrollView
    ref={ref => (this.scrollRef = ref)}
    onContentSizeChange={() => {
    this.scrollRef.scrollToEnd();
    }}
>
</ScrollView>

Question 13

私はしばらくこれと戦い、ついに私にとって本当にうまく機能する何かを思いついた。多くの人のように、私は.scrollToEnd無駄にしようとしました。私のために働いた解決策はonContentSizeChange、onLayout小道具と、「一番下までスクロールすること」が実際に何を意味するのかを視覚的に考えることの組み合わせでした。最後の部分は今では些細なことのように思えますが、理解するのに永遠にかかりました。

がScrollView固定の高さであるとすると、コンテンツの高さがコンテナの高さを超える場合、prevHeight（コンテンツの高さ）から（の固定の高さScrollView）を差し引いてオフセットを計算しましたcurrHeight。視覚的に想像できる場合は、y軸の違いまでスクロールして、コンテンツの高さをそのオフセットだけコンテナ上でスライドさせます。オフセットをインクリメントし、現在のコンテンツの高さを以前の高さにして、新しいオフセットを計算し続けました。

これがコードです。それが誰かを助けることを願っています。

class ChatRoomCorrespondence extends PureComponent {
  currHeight = 0;
  prevHeight = 0;
  scrollHeight = 0;

  scrollToBottom = () => {
    this.refs.scrollView.getScrollResponder().scrollResponderScrollTo({
      x: 0,
      y: this.scrollHeight,
      animated: true
    });
  };

  render() {
    return (
      <ScrollView
        style={Styles.container}
        ref="scrollView"
        onContentSizeChange={(w, h) => {
          this.currHeight = h;

          if (
            this.prevHeight > 0 &&
            this.currHeight - this.scrollHeight > this.prevHeight
          ) {
            this.scrollHeight += this.currHeight - this.prevHeight;
            console.log("--------------------------------------------");
            console.log("Curr: ", this.currHeight);
            console.log("Prev: ", this.prevHeight);
            console.log("Scroll: ", this.scrollHeight);
            this.prevHeight = this.currHeight;
            console.log("PREV: ", this.prevHeight);
            console.log("--------------------------------------------");

            this.scrollToBottom();
          }
        }}
        onLayout={ev => {
          // Fires once
          const fixedContentHeight = ev.nativeEvent.layout.height;
          this.prevHeight = fixedContentHeight;
        }}
      >
        <FlatList
          data={this.props.messages}
          renderItem={({ item }) => (
            <ChatMessage
              text={item.text}
              sender={item.sender}
              time={item.time}
              username={this.props.username}
            />
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </ScrollView>
    );
  }
}

Question 14

答えるには遅すぎると思いますが、ハックが1つあります。を使用するFlatList場合は、inverted設定transform scaleにフォールバックするプロパティを有効にできます-1（これはScrollView...などの他のリストコンポーネントで受け入れられます）。FlatListデータを使用してレンダリングすると、常に下部に表示されます。

Question 15

スクロールビューのcontentOffsetプロパティをコンテンツの現在の高さに設定してみてください。

必要なことを達成するには、onScrollイベントの一部としてこれを行うことができます。ただし、これによりユーザーエクスペリエンスが低下する可能性があるため、新しいメッセージが追加された場合にのみこれを行う方がユーザーフレンドリーであることがわかる場合があります。

Question 16

私も同様の問題を抱えていましたが、このページを読んだ後（頭痛の種です！）、ListViewを反転してチャットアプリケーションのすべてを簡単にするこの非常に素晴らしいnpmパッケージを見つけました!!

Question 17

少し遅れています...しかし、この質問を見てください。ScrollViewの一番上までスクロールします

ScrollViewには「scrollTo」メソッドがあります。