首页 > 解决方案 > 我有一个反应本机应用程序,我想知道如何标记图片以在另一个屏幕中使用

问题描述

我有一个应用程序,按下按钮即可循环浏览图片。我想添加另一个按钮,该按钮在按下时标记图片以在另一个屏幕中使用,但我不知道执行此操作的正确方法。

我有一些想法,但我不知道正确的方法,我想学习。就更改我的对象等而言,我非常灵活。

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

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() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const scopeSpecificFunction = () =>
  setCurrentImageIndex(currentImageIndex == imageholder2.length - 1 ?
      0 :
      currentImageIndex + 1 )

  return (
    <View>
      <View>
        {
            imageholder2[currentImageIndex] &&
              <Image
                key={imageholder2[currentImageIndex].id}
                style = {{
                  width: 300,
                  height: 300,
                }}
                source={imageholder2[currentImageIndex].actualimage}
              />
        }
      </View>
      <View>
      <OuterComponent callbackfunction ={()=>scopeSpecificFunction()}/>
      </View>
    </View>
  );
}

标签: javascriptreactjsreact-native

解决方案


推荐阅读