4

我正在我的应用程序中实现介绍功能。启动屏幕后屏幕显示的位置。我使用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>
  );
};

每当我单击下一个按钮时，它应该会自动将滑动条滑动到下一个组件或屏幕。但是，在用户单击下一个按钮时的第一次渲染时，Slider.tsxswiperEl.current!.scrollTo(index);的useEffect块上不起作用。但是当用户第二次点击时，它不会突然起作用。

我是使用 React 的初学者，但我仔细阅读文档，了解如何使用useRef和useEffect的钩子。也许我错过了什么？

如果有人可以提供帮助，我们将不胜感激。谢谢

4

0 回答 0