callstack / callstack/react-native-pager-view
setPageWithoutAnimation animates the pager on calling it after refresh
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.4k
- Forks
- 476
- Ø Merge
- 10 T. 21 Std.
- Gemergte PRs (30 T.)
- 2
Beschreibung
## Environment
react native 0.70
rn-pager-view 6.0.0
lodash
react 18
device: android emulator
## Description
setPageWithoutAnimation animates the pagechange if I call it in useEffect. Every time I change the array I want to change the current page as well. When I go previous it works right but it performs animation too.
## Reproducible Demo
```
import { Button, StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import PagerView from 'react-native-pager-view'
import { addDays, subDays } from 'date-fns'
import { last, range } from 'lodash'
const ShowBalance = () => {
const [currDay, setCurrDay] = useState(new Date())
const [postion, setPostion] = useState(1)
const [days, setDays] = useState([
subDays(currDay, 1),
currDay,
addDays(currDay, 1),
])
const pagerRef = React.useRef(null)
const renderAtATime = 5
const getNextDays = date => {
const arr = range(1, renderAtATime)
const result = arr.map(i => addDays(date, i))
return result
}
const getPrevDays = date => {
const arr = range(renderAtATime, 0, -1)
console.log('range arr', arr)
const result = arr.map(i => subDays(date, i))
return result
}
const test = () => {
pagerRef.current.setPageWithoutAnimation(5)
}
console.log('days', days)
const onChange = e => {
const position = e.nativeEvent.position
if (position > days.length - 2) {
const temp = [...days]
temp.push(...getNextDays(last(temp)))
setDays(temp)
}
if (position < 2) {
const temp = [...days]
temp.unshift(...getPrevDays(temp[0]))
setPostion(renderAtATime + position)
// pagerRef?.current?.setPageWithoutAnimation(renderAtATime + position)
setDays(temp)
}
}
useEffect(() => {
pagerRef?.current?.setPageWithoutAnimation(postion)
}, [days])
return (
console.log('onPageScrollStateChanged', i)}
onPageSelected={onChange}
// offscreenPageLimit={6}
ref={pagerRef}
>
{/*
First page
Second page
*/}
{days.map((item, i) => (
{item.toLocaleDateString()}
))}
)
}
export default ShowBalance
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
})
```
Beitragsleitfaden
Rechercherichtung
Beginne mit dem reproduzierbaren React Native-Beispiel und verfolge den von useEffect ausgeführten Aufruf von setPageWithoutAnimation, nachdem sich das days-Array geändert hat. Vergleiche sein Verhalten unter Android mit dem erwarteten Seitenwechsel ohne Animation. Ermittle anschließend die relevante verfügbare Regressionstestabdeckung im Repository und überprüfe, dass der Pager nicht mehr animiert.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native, typescript
- Bereich
- mobile-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100