Javascript 如何使用状态/道具循环浏览一系列图像？

我有一个react原生应用程序，我想使用包含图像的状态/道具传入一个对象数组。我想在按下按钮时循环浏览图像。我在这方面已经做了一段时间了，现在还没弄明白。有人介意看一下吗？我是新手，所以如果你认为我应该用不同的方式来做，请让我知道。谢谢

我已经研究javascript/react native有一段时间了，不知道该怎么做

//file1 (ImageHolder.js)
import type {ImageSourcePropType } from "react- native/Libraries/Image?ImageSourcePropType";

export type ImageHolder = {
  id: string,
  actualimage: ImageSourcePropType,
};

//file2(App.js)

import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react- native';
import { type ImageHolder } from './ImageHolder'

const imageholder2: ImageHolder[] = [
  {
    id: "1",
    actualimage: require("./images/image1.jpeg"),
  },
  {
    id: "2",
    actualimage: require("./images/image2.jpg"),
  },
  {
    id: "3",
    actualimage: require("./images/image3.jpg"),
  },
  {
    id: "4",
    actualimage: require("./images/image4.jpg"),
  },
];



export default function App() {
  return (
    <View>
      <View>
        <Image
        style = {{
          width: 300,
          height: 300,
        }}
        source = {require('./images/image1.jpeg')} />
      </View>
      <View>
      <Button title= "Press me"/>
      </View>
    </View>
  );
}

//文件1（ImageHolder.js）
从“react-native/Libraries/Image？ImageSourcePropType”导入类型{ImageSourcePropType}；
导出类型ImageHolder={
id:string，
实现图像：ImageSourcePropType，
};
//文件2（App.js）
从“React”导入React；
从'react-native'导入{样式表、文本、视图、图像、按钮}；
从“/ImageHolder”导入{type ImageHolder}
常量imageholder2:ImageHolder[]=[
{
id:“1”，
实现图像：需要（“./images/image1.jpeg”），
},
{
id:“2”，
实现图像：需要（“./images/image2.jpg”），
},
{
id:“3”，
实现图像：需要（“./images/image3.jpg”），
},
{
id:“4”，
实现图像：需要（“./images/image4.jpg”），
},
];
导出默认函数App（）{
返回(
);
}

---

我只想在按下按钮时能够循环浏览图像，并以某种方式访问我正在播放的内容。

保持当前图像索引处于一种状态，并在按下按钮时增加ir

import React, { useState } from 'react'

export default function App() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0)

  return (
    <View>
      <View>
        {
            imageholder2[currentImageIndex] &&
              <Image
                key={imageholder2[currentImageIndex].id}
                style = {{
                  width: 300,
                  height: 300,
                }}
                source={imageholder2[currentImageIndex].actualimage} 
              />
        }
      </View>
      <View>
      <Button 
          title= "Press me" 
          onPress={() => setCurrentImageIndex(currentImageIndex == imageholder2.length - 1 ? 
              0 : 
              currentImageIndex + 1
          )}
      />
      </View>
    </View>
  );
}

import React，{useState}来自“React”
导出默认函数App（）{
常量[currentImageIndex，setCurrentImageIndex]=useState（0）
返回(
{
imageholder2[currentImageIndex]&&
}
setCurrentImageIndex（currentImageIndex==imageholder2.length-1？
0 : 
currentImageIndex+1
)}
/>
);
}

另外，如果您将图像保持在一种状态，效果会更好

---

抱歉，没有给出typescript答案。

请使用状态变量存储当前图像索引。按下按钮时，增加变量/将其重置为0。谢谢Chris！如何从等于id的状态变量访问imageholder实际图像？我是新手，如果我错过了一些简单的东西，我很抱歉。像

imageholder2[this.state.currentImageId].RealizeMage

这样的东西就可以了。请注意，

.map

是JavaScript中数组的本机方法。传递比数组中的图像索引更明确一点的东西可能更好（万一顺序改变了。）所以

onClick={（）=>handleImageClick（img.id）}

可能会更好：）+1来自我！嗨，伙计们。我认为我的计划是将索引存储在状态中，然后在按下按钮时增加索引。如何从等于id的状态变量访问imageholder实际图像？我是新手，如果我遗漏了一些简单的东西，我道歉。@Matt123您所说的

访问图像支架是什么意思？你想做什么？对不起，我只想显示下一幅图像。但是我想通过一个等于imageholder Id的状态Id来访问它