[react-native] ScrollView를 아래쪽으로 스크롤 할 수 있습니까?

Program / 글쓴이

채팅과 같은 앱의 경우 ScrollView최신 메시지가 이전 메시지 아래에 표시되기 때문에 구성 요소를 맨 아래로 스크롤 하고 싶습니다 . 스크롤 위치를 조정할 수 있습니까 ScrollView?

답변

대한 기본 0.41 반응 이후 , 당신이 할 수있는 내장 scrollToEnd방법 :

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

답변

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);

답변

다음은 내가 모을 수있는 가장 간단한 해결책입니다.

 <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
    });
}}
/>;

답변

후크를 사용할 수있는 함수 컴포넌트를 작성하는 모든 사람을 위해

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 })}
    />
  );
};

답변

이 해결책을 시도하십시오

xcode 10.0

RN : 56.0.0

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

답변

2020 년 이후의 누군가가 기능 구성 요소로이를 달성하는 방법을 궁금해하는 경우. 이것이 내가 한 방법입니다.

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

답변

react-native-invertible-scroll-view모듈을 사용하여 스크롤 / 목록보기를 반전 한 다음 간단히 호출 ref.scrollTo(0)하여 하단으로 스크롤 할 수 있습니다.

모듈 설치 :

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

그런 다음 구성 요소를 가져옵니다.

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

그런 다음 a 대신 다음 JSX를 사용하십시오 ScrollView.

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

이것은 react-native-invertible-scroll-view전체보기의 내용을 뒤집기 때문에 작동 합니다. 뷰의 자식도 일반 뷰와 반대 순서로 렌더링됩니다. 첫 번째 자식이 맨 아래에 나타납니다 .