callstack / callstack/react-native-pager-view
setPageWithoutAnimation animates the pager on calling it after refresh
- 主要言語
- TypeScript
- スター
- 3.4k
- フォーク
- 476
- 平均マージ
- 10日 21時間
- マージ済み PR(30日)
- 2
説明
## 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,
},
})
```
コントリビューションガイド
調査の方向性
再現可能な React Native の例から始め、days 配列の変更後に useEffect から行われる setPageWithoutAnimation 呼び出しを追跡します。Android での動作を、期待されるアニメーションなしのページ変更と比較し、その後、リポジトリで利用可能な関連する回帰テストのカバレッジを特定して、pager がもうアニメーションしないことを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react-native, typescript
- 領域
- mobile-dev
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100