React Native에서 ScrollView의 현재 스크롤 위치를 가져옵니다.
위치 현재 수 ?<ScrollView>리액트 네이티브?
예를 들어 다음과 같습니다.
<ScrollView
horizontal={true}
pagingEnabled={true}
onScrollAnimationEnd={() => {
// get this scrollview's current page or x/y scroll position
}}>
this.state.data.map(function(e, i) {
<ImageCt key={i}></ImageCt>
})
</ScrollView>
해라.
<ScrollView onScroll={this.handleScroll} />
그 후:
handleScroll: function(event: Object) {
console.log(event.nativeEvent.contentOffset.y);
},
또 다른 맥락에서 페이지 표시기도 구현하고 싶다고 가정해 보겠습니다.이 작업을 진행하면 다음과 같습니다.
<ScrollView
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x:
scrollX } } }], {listener: (event) => handleScroll(event)})}
scrollEventThrottle={16}
>
...some content
</ScrollView>
여기서 스크롤X는 페이지 매김에 사용할 수 있는 애니메이션 값이고 handleScroll 함수는 다음 형식을 취할 수 있습니다.
const handleScroll = (event) => {
const positionX = event.nativeEvent.contentOffset.x;
const positionY = event.nativeEvent.contentOffset.y;
};
면책사항: 다음 내용은 주로 리액트 네이티브 0.50에서 제가 직접 실험한 결과입니다.이 문서에는 현재 다음과 같은 많은 정보가 누락되어 있습니다.onScrollEndDrag전혀 문서화되어 있지 않습니다.여기에서는 모든 것이 문서화되어 있지 않은 행동에 의존하고 있기 때문에 유감스럽게도 이 정보가 1년 또는 1개월 후에도 정확하다고는 약속할 수 없습니다.
또한 아래의 모든 것은 y 오프셋에 관심이 있는 순수 수직 스크롤 뷰로 가정합니다.필요하다면 x 오프셋으로 변환하는 것이 독자에게 쉬운 연습이 될 것입니다.
의 다양한 ScrollView을 보다event 해서 현재 스크롤 를 알 수.event.nativeEvent.contentOffset.y이들 핸들러 중 일부는 아래와 같이 Android와 iOS의 동작이 약간 다릅니다.
onScroll
Android의 경우
사용자가 스크롤하는 동안 모든 프레임을 실행합니다. 사용자가 스크롤 보기를 해제한 후 스크롤 보기가 미끄러지는 동안 모든 프레임, 스크롤 보기가 정지될 때 마지막 프레임에서 프레임 변경(예: 가로에서 세로 회전)으로 인해 스크롤 보기의 오프셋이 변경될 때마다 실행됩니다.
iOS에서
사용자가 드래그 중 또는 스크롤뷰가 활공하고 있을 때 프레임별로 최대 1회씩 지정된 빈도로 기동합니다.scrollEventThrottle={16}스크롤 뷰가 활공하기에 충분한 모멘텀이 있을 때 사용자가 스크롤 뷰를 놓으면onScroll을 사용하다 스크롤뷰가 정지해 있는 onScroll마지막 위치를 향해 발포하는 것은 보장되지 않는다.scrollEventThrottle 설정되었습니다.onScroll이치노
에는 퍼포먼스 비용이 있습니다.scrollEventThrottle={16}더 큰 값으로 설정하면 줄일 수 있습니다.은 「」, 「」를 합니다.onScroll모든 프레임을 발사하지는 않습니다.
onMomentumScrollEnd
활공 후 스크롤 뷰가 정지할 때 실행됩니다.사용자가 정지해 있는 동안 스크롤 보기를 해제하면 스크롤 보기가 미끄러지지 않습니다.
onScrollEndDrag
스크롤 보기가 정지 상태인지 활공 시작 여부에 관계없이 사용자가 스크롤 보기를 끌지 않을 때 실행됩니다.
이러한 동작의 차이를 고려할 때 오프셋을 추적하는 가장 좋은 방법은 사용자의 정확한 상황에 따라 달라집니다. 경우 iOS의 처리 등 및 iOS 지원 )ScrollView로테이션으로 를 "안드로이드" 설정으로부터 scrollEventThrottle스크롤 뷰의 콘텐츠 변경도 처리해야 합니다.그러면 완전 엉망진창이 됩니다.
Android만 하면 되는 단, Android를 사용하면 .onScroll:
<ScrollView
onScroll={event => {
this.yOffset = event.nativeEvent.contentOffset.y
}}
>
iOS를 추가로 지원하려면onScroll모든 프레임을 처리하여 퍼포먼스에 미치는 영향을 받아들이도록 합니다.프레임 변경을 처리할 필요가 없는 경우에는 조금 더 복잡해집니다.
<ScrollView
onScroll={event => {
this.yOffset = event.nativeEvent.contentOffset.y
}}
scrollEventThrottle={16}
>
되어 있는 의 퍼포먼스 , 「」를 수 .scrollEventThrottle, 「」를 해 주세요.onScrollEndDrag★★★★★★★★★★★★★★★★★★:
<ScrollView
onScroll={event => {
this.yOffset = event.nativeEvent.contentOffset.y
}}
onScrollEndDrag={event => {
this.yOffset = event.nativeEvent.contentOffset.y
}}
scrollEventThrottle={160}
>
단, 프레임 변경(예를 들어 디바이스 회전을 허용하여 스크롤 뷰 프레임의 사용 가능한 높이를 변경) 및/또는 콘텐츠 변경을 처리하려면 스크롤 뷰의 프레임과 콘텐츠의 높이를 모두 추적해야 합니다.따라서 가능한 최대 오프셋을 지속적으로 계산하고 프레임 또는 콘텐츠크기 변경으로 오프셋이 자동으로 감소된 시점을 유추합니다.
<ScrollView
onLayout={event => {
this.frameHeight = event.nativeEvent.layout.height;
const maxOffset = this.contentHeight - this.frameHeight;
if (maxOffset < this.yOffset) {
this.yOffset = maxOffset;
}
}}
onContentSizeChange={(contentWidth, contentHeight) => {
this.contentHeight = contentHeight;
const maxOffset = this.contentHeight - this.frameHeight;
if (maxOffset < this.yOffset) {
this.yOffset = maxOffset;
}
}}
onScroll={event => {
this.yOffset = event.nativeEvent.contentOffset.y;
}}
onScrollEndDrag={event => {
this.yOffset = event.nativeEvent.contentOffset.y;
}}
scrollEventThrottle={160}
>
네, 정말 끔찍해요또, 스크롤 뷰의 프레임과 컨텐츠의 사이즈를 동시에 변경하는 경우, 항상 올바르게 동작하는 것은 아닙니다.그러나 이것이 제가 생각해낼 수 있는 최선이며, 이 기능이 프레임워크 자체에 추가되기 전까지는 누구나 할 수 있는 최선이라고 생각합니다.
은 다른를 얻는 합니다.onScroll,onMomentumScrollEndetc;인덱스를 값을 할 수 등: 페이지 인덱스를 알 수 있습니다.
<ScrollView
pagingEnabled={true}
onMomentumScrollEnd={this._onMomentumScrollEnd}>
{pages}
</ScrollView>
_onMomentumScrollEnd = ({ nativeEvent }: any) => {
// the current offset, {x: number, y: number}
const position = nativeEvent.contentOffset;
// page index
const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);
if (index !== this.state.currentIndex) {
// onPageDidChanged
}
};
iOS에서 ScrollView와 가시 영역의 관계는 다음과 같습니다.
참조: https://www.objc.io/issues/3-views/scroll-view/
브래드 오일러의 답은 정확하다. 이벤트는 입니다.위치를 가 있는 는, 「」를 할 가 있습니다.scrollEventThrottle다음과 같이 합니다.
<ScrollView onScroll={this.handleScroll} scrollEventThrottle={16} >
<Text>
Be like water my friend …
</Text>
</ScrollView>
이벤트 핸들러:
handleScroll: function(event: Object) {
console.log(event.nativeEvent.contentOffset.y);
},
성능 문제가 발생할 수 있습니다.스로틀을 적절히 조정합니다. 16이 가장 많은 업데이트를 제공합니다.0은 1개뿐입니다.
할 하는 것이 단순히 위치를 들어 를 취득하는 , 를합니다.onScroll청취자가 퍼포먼스 문제를 일으킬 수 있습니다.현재 스크롤 위치를 간단하게 취득하는 가장 뛰어난 방법은 react-native-invoke 패키지를 사용하는 것입니다.이 예에서는, 이 패키지는 다른 여러 가지 작업을 실시합니다.
스크롤 후 x/y를 원래 질문대로 종료하려면 아마도 다음과 같은 방법이 가장 쉬운 방법은 다음과 같습니다.
<ScrollView
horizontal={true}
pagingEnabled={true}
onMomentumScrollEnd={(event) => {
// scroll animation ended
console.log(e.nativeEvent.contentOffset.x);
console.log(e.nativeEvent.contentOffset.y);
}}>
...content
</ScrollView>
이렇게 하면 뷰에서 현재 스크롤 위치를 라이브로 얻을 수 있습니다.현재 하고 있는 것은 on scroll event listener와 scroll Event를 사용하는 것뿐입니다.스로틀.제가 만든 스크롤 기능을 다루는 이벤트로 전달하고 소품을 업데이트합니다.
export default class Anim extends React.Component {
constructor(props) {
super(props);
this.state = {
yPos: 0,
};
}
handleScroll(event){
this.setState({
yPos : event.nativeEvent.contentOffset.y,
})
}
render() {
return (
<ScrollView onScroll={this.handleScroll.bind(this)} scrollEventThrottle={16} />
)
}
}
페이지에 대해서는 기본적으로 위의 방법을 사용하여 정확하게 수행하는 고차 컴포넌트를 제작하고 있습니다.초기 레이아웃 및 콘텐츠 변경과 같은 세부 사항에 대해 자세히 설명하면 실제로 약간의 시간이 걸립니다.'정확하게' 처리했다고는 할 수 없지만, 어떤 의미에서는 신중하게 일관되게 이 작업을 수행하는 컴포넌트를 사용하기 위해 정답을 고려하겠습니다.
react-native-paged-scroll-view 를 참조해 주세요.제가 잘못했다고 해도 피드백을 주시면 감사하겠습니다!
입니다.onScroll무한 루프에 들어갑니다. onMomentumScrollEnd ★★★★★★★★★★★★★★★★★」onScrollEndDrag 쓸 수
는 어요를 믿는다.contentOffset왼쪽 상단 스크롤 오프셋을 포함하는 개체가 표시됩니다.
http://facebook.github.io/react-native/docs/scrollview.html#contentoffset
<ScrollView style={{ height: hp('70%'), width: '100%' }} showsVerticalScrollIndicator={false}
ref={myRef}
// for getting scrollView offset ->
onScroll={(event => setOffset(event.nativeEvent.contentOffset.y))}
// for giving scrollView offset ->
onContentSizeChange={() =>
myRef.current.scrollTo({
x: 0,
y: Offset
})
}
// pagingEnabled={true}
// scrollEventThrottle={16}
><스크롤뷰
showsVerticalScrollIndicator={false}
ref={myRef}
onScroll={(이벤트=> setOffset(event.nativeEvent.contentOffset.y)}
onContentSizeChange={() =>
myRef.current.scrollTo({)
x: 0,
y: Offset
})
}
언급URL : https://stackoverflow.com/questions/29503252/get-current-scroll-position-of-scrollview-in-react-native
'programing' 카테고리의 다른 글
| webpack-dev-server 'webpack' 모듈을 찾을 수 없습니다. (0) | 2023.03.19 |
|---|---|
| ajax jquery 단순 가져오기 요청 (0) | 2023.03.19 |
| OPTIONS http 메서드의 스프링 보안 비활성화 (0) | 2023.03.19 |
| WordPress를 통해 액세스할 수 있는 커스텀 기능 필요 (0) | 2023.03.19 |
| jQuery click 기능이 Ajax 호출 후 작동하지 않습니까? (0) | 2023.03.19 |