React Native基于索引的映像

iyr7buue 于 2023-10-22 发布在 React

关注(0)|答案(1)|浏览(119)

我得到了一些图像呈现在彼此之上的卡片，我想使用索引循环遍历我的图像数组。控制台显示我的周期按预期工作，但图像没有更新：/ ps：我用https://github.com/alexbrillant/react-native-deck-swiper
SwipeCard.js

renderCard={(card) => {
                let ImageIndex = 0;
                const ImageCycle = () => {
                    ImageIndex === card.Image.length - 1 ? ImageIndex = 0 : ImageIndex++
                    console.log(ImageIndex);
                    return ImageIndex
                    
                }
                return (
                    <View style={styles.card} key={card.id}>
                        <TouchableWithoutFeedback onPress={() => {ImageCycle()}}>
                            <Image style={styles.image} source={card.Image[ImageIndex]}/>
                        </TouchableWithoutFeedback>

Cards.js

Image:   [
        require('../ProfileImages/Sydney.jpg'),
        require('../ProfileImages/Sydney.jpg'),
        require('../ProfileImages/Sydney.jpg'),
],

我考虑过使用useState，但我不太确定如何在这里使用它

react-native

来源：https://stackoverflow.com/questions/77277468/react-native-change-image-based-on-index

1条答案

按热度按时间

pxiryf3j1#

哦！看起来你面临的问题与Image组件和ImageCycle函数交互的方式有关。在您的代码中，当按下TouchableWithoutFeedback时，您将调用ImageCycle函数。但是，该函数似乎并不直接更新Image组件。要实现所需的图像循环行为，您可以在组件的状态中管理图像索引，并使用setState函数更新它。
这里有一个例子，可能对你有帮助：

import React, { useState } from 'react';

// ...

function YourComponent() {
  const [ImageIndex, setImageIndex] = useState(0);

  const ImageCycle = () => {
    const newIndex = (ImageIndex + 1) % card.Image.length;
    setImageIndex(newIndex);
  };

  return (
    <View style={styles.card} key={card.id}>
      <TouchableWithoutFeedback onPress={ImageCycle}>
        <Image style={styles.image} source={card.Image[ImageIndex]} />
      </TouchableWithoutFeedback>
      {/* Add other card content here */}
    </View>
  );
}

// ...

export default YourComponent;

赞(0）回复(0）举报 2023-10-22

我来回答

React Native基于索引的映像

1条答案

相关问题

热门标签

最新问答