如何使用状态/属性在一组图像中循环显示？

马特123

我有一个本机应用程序，我想使用包含图像的状态/属性传递对象数组。我想在按下按钮时循环显示图像。我已经为此工作了一段时间，无法弄清楚。有人介意看看吗？我是本机反应的新手，所以如果您认为我应该以不同的方式进行操作，请告诉我。谢谢！！

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

我只是希望能够在按下按钮时浏览图像，并以某种方式访问我正在使用的内容。

文科夫斯基

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

另外，最好将图像保持在一个状态。

很抱歉没有给出打字稿答案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。