React Native Swiper ref 元素 scrollTo 在第一次渲染時不起作用

Question

我正在我的應用程序中實現介紹功能。 啟動屏幕后屏幕顯示的位置。 我使用react-native-swiper組件來指導用戶在我的應用程序中進行分步教程。

下面是我的Slider.tsx組件代碼。

type SliderProps = {
  // swiperEl: RefObject<Swiper>;
  // onIndexChanged: (index: number) => void;
  index: number;
};

const Slider = ({ index }: SliderProps) => {
  const swiperEl = useRef(null);
  useEffect(() => {
    swiperEl.current!.scrollTo(index);
  }, [index, swiperEl]);
  return (
    <View style={styles.sliderContainer}>
      <Swiper
        scrollEnabled={false}
        index={index}
        ref={swiperEl}
        style={styles.wrapper}
      >
        <View style={styles.slide1}>
          <View style={[styles.circle, { backgroundColor: '#FF7F50' }]} />
        </View>
        <View style={styles.slide2}>
          <View style={[styles.circle, { backgroundColor: '#FF6347' }]} />
        </View>
        <View style={styles.slide3}>
          <View style={[styles.circle, { backgroundColor: '#FF4500' }]} />
        </View>
      </Swiper>
    </View>
  );
};

這是我的WelcomeScreenContainer.tsx

const WelcomeScreen = () => {
  const [currentPage, setPage] = useState(0);
  const navigation = useNavigation();

  const handleNextClick = () => {
    if (currentPage === 2) {
      navigation.navigate('LoginScreen');
      return;
    }
    setPage((prevPage) => prevPage + 1);
  };

  const handleSkipPress = () => navigation.navigate('LoginScreen');

  console.log('Parent', currentPage);
  return (
    <View style={styles.parentContainer}>
      <View style={styles.headerContainer}>
        {/* <Text style={{ fontSize: 35 }}>WelcomeScreen</Text> */}
      </View>
      <Slider index={currentPage} />
      <View style={{ flex: 1 }} />
      <ButtonContainer
        onNextPress={handleNextClick}
        onSkipPress={handleSkipPress}
      />
    </View>
  );
};

每當我單擊下一個按鈕時，它應該會自動將滑動條滑動到下一個組件或屏幕。 但是，在用戶單擊下一個按鈕時的第一次渲染中， swiperEl.current.;scrollTo(index); 在Slider.tsx的useEffect塊上不起作用。 但是當用戶第二次點擊時，它不會突然起作用。

我是使用 React 的初學者，但我仔細閱讀文檔，了解如何使用useRef和useEffect的鈎子。 也許我錯過了什么？

如果有人可以提供幫助，我們將不勝感激。 謝謝

Answer 1

https://www.npmjs.com/package/react-native-swiper現在支持 scrollTo 功能。 我沒有在官方文檔中看到這一點，但也許我不夠小心，這就是 2022 年對我有用的方法

...
const milestoneData = [1, 2, 3, 4, 5] //your data
const mileStoneSwiperRef = useRef(null);

const scrollMileStoneTo = (index) => {
 mileStoneSwiperRef?.current?.scrollTo(index);
}



return (<View>
  <View style={{padding: 10, backgroundColor: BaseColor.mainColor2}}>
    <ScrollView showsHorizontalScrollIndicator={false} alwaysBounceHorizontal={true} horizontal={true} >
    {milestoneData?.map((item, index) => <>
              <Pressable onPress={() => scrollMileStoneTo(index)} style={{padding: 5, marginRight: 10, alignItems: 'center'}}>
                <Image source={Images.math}  style={[styles.contact, {width: 60, height: 60}]}/>
              </Pressable></>)}
    </ScrollView>
  </View>

  <Swiper
    ref={mileStoneSwiperRef}
    loop={false}
    centeredSlides={false}
    showsPagination={false}
    bounces={true}
    removeClippedSubviews={false}
  >

    {milestoneData?.map((item, index) => <View>


      <View style={styles.groupHeadingViews}>
        <Text fontResizeable bold style={styles.escrowGroupHeading}>{(`${tradeMethod} Name`).toUpperCase()}</Text>
        
        <View style={styles.subTitleAndWordCount}>
          <Text fontResizeable style={styles.escrowGroupSubHeading}>Briefly Name Your Country</Text>
          <Text fontResizeable style={styles.escrowGroupSubHeading}>{milestoneData?.[index]?.name?.length}/30</Text>
        </View>
      </View>
    </View>)}

  </Swiper>
</View>)
...

完成 scrollTo() 索引的技巧是以下方法

const scrollMileStoneTo = (index) => {
   mileStoneSwiperRef?.current?.scrollTo(index);
}