Swiper 轮播上的自动播放在 React Native 中不起作用

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>