React Native TSX：Swiper 上的自动播放不起作用

Question

您好，我正在尝试在滑动器上实现自动播放，但它似乎不起作用， 有谁知道如何修理它？代码是 TSX 我正在使用 React Native。 对于那些想知道我在做什么的人，我正在创建一个带有一些漫画的旋转木马，我将在我的主页中实现这些漫画。

  useEffect(() => {
    const fetchData = async () => {
      try {
        const resp = await axios({
          method: 'GET',
          url: `${baseUrl}/manga?limit=7&includedTagsMode=AND&excludedTagsMode=OR&contentRating%5B%5D=safe&order%5BlatestUploadedChapter%5D=desc&includes%5B%5D=manga&includes%5B%5D=cover_art`
        });
        const mangaData = resp.data.data;
        const mangaPromises = mangaData.map(async (manga: any) => {
          const respCover = await axios({
            method: 'GET',
            url: `${baseUrl}/manga/${manga.id}?includes[]=author&includes[]=artist&includes[]=cover_art`
          });
          const coverIndex = respCover.data.data.relationships.findIndex((i: any) => i.attributes.fileName);
          const mangaFileName = respCover.data.data.relationships[coverIndex].attributes.fileName;
          return {
            id: manga.id,
            title: manga.attributes.title.en,
            imageUri: `https://uploads.mangadex.org/covers/${manga.id}/${mangaFileName}`,
            description: manga.attributes.description.en
          };
        });
        const fetchedManga: any = await Promise.all(mangaPromises);
        setResultArr(fetchedManga);
        setAutoplay(true);
      } catch (error: any) {
        console.error('Errore durante la richiesta API:', error);
      }
    };
    fetchData();
  }, []);


  return (

    <Swiper dotColor="false" activeDotColor="false" autoplay >
      {resultArr.map((manga, index) => (
        <View key={index} style={{ flex: 1, }}>
          <ImageBackground
            source={{ uri: manga.imageUri }}
            style={{ flex: 2, height: 500 }}
            imageStyle={{ opacity: 0.6 }}
          >
            <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.7)', paddingLeft: 3 }}>
              <View onLayout={onLayout} style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 18 }}>
                <View style={{ flex: 0.4 }}>
                  <Card elevation={0} style={{ width: '80%', paddingBottom: 17 }}>
                    <Card.Cover source={{ uri: manga.imageUri }} />
                  </Card>
                </View>
                <View style={{ flex: 0.6, marginLeft: 10, justifyContent: 'center' }}>
                  <Text style={{ fontSize: 18, fontWeight: 'bold', color: 'white' }}>{manga.title}</Text>
                  <Text numberOfLines={3} style={{ fontSize: 14, color: 'white' }}>{manga.description}</Text>
                </View>
              </View>
            </View>
          </ImageBackground>
        </View>
      ))}
    </Swiper>
  );
}

export default HomeCarousel;  

Answer 1

您好，您可以尝试为 swiper 组件设置按键吗？这是例子

<Swiper key={`swiper-${resultArr?.length}`} dotColor="false" activeDotColor="false" autoplay={true} >  
   //Your components
</Swiper>