更改图像点击In React本地

Question

我正在尝试创建一个应用程序，该应用在单击图像时更改为许多图像之一。我使用了可触摸的不透明度，可以在单击时使图像显示警报。我只是无法将其更改为文件中的许多其他人。

到目前为止，这是我所有的代码：

import React from 'react';

import { Component, Stylesheet, useState, TouchableOpacity, Button, View, Text, Image, ScrollView, TextInput, Alert } from 'react-native';

// main part of the app
const App = () => {
  

  var array = [require("./cards/card.png"), require("./cards/card2.png")]
  var x = 0
  

  //onclick function
  const handlePress = () => {
    //some logic
    alert("help")
    x+=1
  }
  
  // what shows up on the app
  return (

    <ScrollView>

      <View>
          <Text>{array[x]}</Text>
          <Text>{x}</Text>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          
          <TouchableOpacity
            onPress={(handlePress)}
          >

            <Image
              style={{ 
                width: 300,
                height: 300,
              }}
              resizeMode="contain"
              source={
                array[x]
              }
            />

          </TouchableOpacity>

          </View>

      </View>

    </ScrollView>
    
  );
}

export default App;

我希望将卡更改为“卡片”文件夹中的其他图像。我该怎么做才能使其动态并将其更改为文件夹中的其他任何卡片？

Answer 1

为了更改屏幕上安装的图像或任何信息，React必须重新渲染屏幕并放置所需的正确信息。

为此，您应该使用React状态 https：//reactnative.dev/docs/state

您的代码可能是这样：

import React from 'react';

import { Component, Stylesheet, useState, TouchableOpacity, Button, View, Text, Image, ScrollView, TextInput, Alert } from 'react-native';

// main part of the app
const App = () => {
  
  const [card, setCard] = useState(0); //initial state

  var array = [
    "./cards/card.png", 
    "./cards/card2.png"
  ]
  

  //onclick function
  const handlePress = () => {
    //some logic
    //set card state to the next index
    setCard( current => current + 1);

    //so everytime you click function the state will change and this re-render your component with the new data.
  }
  
  // what shows up on the app
  return (

    <ScrollView>

      <View>
          <Text>{array[card]}</Text>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          
          <TouchableOpacity
            onPress={(handlePress)}
          >

            <Image
              style={{ 
                width: 300,
                height: 300,
              }}
              resizeMode="contain"
              source={ require(array[card]) }
            />

          </TouchableOpacity>

          </View>

      </View>

    </ScrollView>
    
  );
}

export default App;