我如何使用狀態/道具循環瀏覽一系列圖像？

Question

我有一個 react-native 應用程序，我想在其中使用包含圖像的狀態/道具傳遞一個 object 數組。 我想在按下按鈕時循環瀏覽圖像。 我已經為此工作了一段時間，但無法弄清楚。 有人介意看看嗎？ 我是 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>
  );
}

此外，如果您將圖像保持在某種狀態會更好。

抱歉沒有給出打字稿答案。

Answer 2

這是我的回答：

調用 Carousel 組件並傳遞一個包含四個圖像的數組。

<Carousel
    images={[
      "https://randomuser.me/api/portraits/women/1.jpg",
      "https://randomuser.me/api/portraits/men/1.jpg",
      "https://randomuser.me/api/portraits/women/2.jpg",
      "https://randomuser.me/api/portraits/men/2.jpg",
    ]}
  />

那么這是我的輪播組件

import React, { useState } from "react";

function Carousel(props) {
  const { images } = props;
  let [imageIndex, setImageIndex] = useState(0);

  function increase() {
    if (imageIndex <= 2) {
      setImageIndex(imageIndex + 1);
    } else {
      setImageIndex(0);
    }
  }

  function decrease() {
    if (imageIndex > 0) {
      setImageIndex(imageIndex - 1);
    } else {
      setImageIndex(3);
    }
  }

  return (
    <div>
      <button onClick={decrease}>Left</button>
      <img src={images[imageIndex]} alt="carousel" />

      <button onClick={increase}>Right</button>
    </div>
  );
}

export default Carousel;