React-native View-pager setPage在iOS上不工作

zpqajqem  于 2023-06-06  发布在  React
关注(0)|答案(3)|浏览(126)

我正在使用react-native-pager-view,我尝试在索引更改时使用setPage,但它在iOS设备上不起作用。流程是这样的,我试图将索引作为 prop 传递给我的自定义ViewPager,我使用UseEffect为我的ViewPager设置页面,这在iOS上不起作用,我不知道为什么。

// @flow
    import React, { useEffect, useRef } from 'react';
    import { StyleSheet, View, I18nManager } from 'react-native';
    import PagerView, { PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
    
    type Props = {
        children: React$Node,
        index: number,
        onIndexChange: (index: number) => void,
    };
    

    const MyViewPager = ({ children, index, onIndexChange }: Props) => {
        const viewPagerRef = useRef<PagerView>(null);
    
        useEffect(() => {
            viewPagerRef.current?.setPage(index);
        }, [index]);
    
     
        const onPageSelect = (e: PagerViewOnPageSelectedEvent) => {
            onIndexChange(e.nativeEvent.position);
        };
    
        return (
            <View style={styles.container}>
                <PagerView
                    ref={viewPagerRef}
                    style={styles.container}
                    initialPage={index}
                    orientation="horizontal"
                    onPageSelected={onPageSelect}
                >
                    {children}
                </PagerView>
            </View>
        );
    };
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
    });
    
    export default MyViewPager;
g6ll5ycj

g6ll5ycj1#

下一个版本**"^6.0.0-rc.0”**适合我

yarn add react-native-pager-view@^6.0.0-rc.0

如果你使用npm

npm i react-native-pager-view@^6.0.0-rc.0
rpppsulh

rpppsulh2#

如果您在PagerView中有layoutDirection="rtl" prop。尝试删除它,例如

代码不工作

<PagerView
        initialPage={0}
        layoutDirection="rtl"
        ref={ref}
        scrollEnabled={false} >

为我工作的代码

<PagerView
    initialPage={0} 
    ref={ref} 
    scrollEnabled={false} >

这个解决方案对我有效。

k5hmc34c

k5hmc34c3#

我有一个变通办法

>   useEffect(() => {
>     const setPage = async () => {
>       try {
>         pagerRef.current.setPageWithoutAnimation(photoIndex.current);
>       } catch (e) {
>         console.error(e);
>       }
>     };
>     setTimeout(() => {
>       setPage();
>     });   }, [images]);

我认为设置超时与JavaScript运行时和异步有关,我忘记了为什么

相关问题