[英]PageView's onPageScroll gives wrong position on iPhone 12+
Using "react-native-pager-view": "^6.1.2"
package in ReactNative.在 ReactNative 中使用
"react-native-pager-view": "^6.1.2"
package。
I have the same bug as here.我有和这里一样的错误。
https://github.com/callstack/react-native-pager-view/issues/503 https://github.com/callstack/react-native-pager-view/issues/503
I'm trying PagerView with the code pasted below, but when I swipe to move the page, e.nativeEvent.position is different from the actual page index.我正在使用下面粘贴的代码尝试 PagerView,但是当我滑动以移动页面时,e.nativeEvent.position 与实际页面索引不同。
import PagerView, { PagerViewOnPageScrollEvent, PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
import Modal from 'react-native-modal';
const onPageScroll = useCallback((e: PagerViewOnPageScrollEvent) => onPageScrollPagerView(e, setCurrentTabIndex), []);
const onPageScrollPagerView = (
e: PagerViewOnPageScrollEvent,
setCurrentTabIndex: React.Dispatch<React.SetStateAction<number>>,
) => {
console.log(`onPageScroll position = ${e.nativeEvent.position}`);
setCurrentTabIndex(e.nativeEvent.position);
};
return (
<Modal isVisible={isVisible}>
<SafeAreaView>
<View>
<PagerView ref={viewPager} initialPage={0} onPageScroll={onPageScroll} onPageSelected={onPageSelected}>
{list.map((item) => (
<View key={item.id}>
{item.content}
</View>
))}
</PagerView>
</View>
</SafeAreaView>
</Modal>
);
This is the result obtained when scrolling to the first page.这是滚动到第一页时得到的结果。 onPageScroll is called twice, and for some reason the wrong position is returned the second time.
onPageScroll被调用了两次,不知为何第二次返回了错误的position。
And 0 is set to setCurrentTabIndex.并将 0 设置为 setCurrentTabIndex。
onPageScroll position = 1
onPageScroll position = 0
Is there any way to resolve this?有什么办法可以解决这个问题吗?
It may be related to what you write in <Modal></Modal>
of 'react-native-modal'
.这可能与你在
'react-native-modal'
<Modal></Modal>
中写的内容有关。
As also written here, this problem does not occur on iPhone11, but on iPhone12 and newer devices.同样写在这里,这个问题不会出现在iPhone11上,而是出现在iPhone12及更新的设备上。
I didn't use 'react-native-modal'
, I used fullscreen modal.我没有使用
'react-native-modal'
,我使用了全屏模式。 screenOptions={{ presentation: 'modal' }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.