javascript - 我如何使用状态/ Prop 循环浏览一系列图像？

Question

我有一个 react native 应用程序，我想在其中使用包含图像的状态/ Prop 传递一个对象数组。我想在按下按钮时循环浏览图像。我已经为此工作了一段时间，但无法弄清楚。有人介意看看吗？我是 react-native 的新手，所以如果您认为我应该以不同的方式做这件事，请告诉我。谢谢!!

我研究 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>
  );
}

我只是希望能够在按下按钮时循环浏览图像，并且能够以某种方式访问​​我正在打开的内容。

Answer 1

保持当前图像索引状态，按下按钮时增加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>
  );
}

另外，如果你让图像保持状态会更好。

很抱歉没有给出 typescript 答案。