React Native循环图片点击问题：仅触发单图点击并展示信息

The core issue here is that you're using a single isModalVisible state variable to control all your items—so when you toggle it, every item responds to that change. To fix this, we need to track the visibility state per item instead of using a single boolean.

Here's how to adjust your code step by step:

Step 1: Update State to Track Individual Items #

Replace the single isModalVisible boolean with an array where each index corresponds to whether that specific item is visible. Initialize it with false for all items:

constructor(props) {
  super(props);
  this.state = {
    count: 5, // Replace with your actual count value
    visibleItems: Array(this.state.count + 1).fill(false) // +1 since your loop runs from 0 to count inclusive
  };
}

Step 2: Modify the Toggle Function to Target Specific Items #

Update callFunc to accept an index parameter, then toggle only that item's visibility in the state. Using the functional update form ensures we're working with the latest state:

callFunc(index) {
  this.setState(prevState => {
    const updatedVisibleItems = [...prevState.visibleItems];
    updatedVisibleItems[index] = !updatedVisibleItems[index];
    return { visibleItems: updatedVisibleItems };
  });
}

Step 3: Adjust Render Logic to Use Per-Item State #

In your loop, check the visibleItems array for the current index, and pass the index to callFunc when the item is pressed. Also, fix the image source to use your imageCharacters array instead of hardcoding a single image:

let Blocks = [];
for (let i = 0; i <= this.state.count; i++) {
  let item = imageCharacters[i];
  let amt = amount[i];
  Blocks.push(
    <View key={i} style={styles.card}>
      <TouchableHighlight onPress={() => this.callFunc(i)} underlayColor="white">
        <View>
          {/* Show image if this item is not visible */}
          {!this.state.visibleItems[i] && (
            <Image source={item} style={styles.iconSize} />
          )}
          {/* Show text if this item is visible */}
          {this.state.visibleItems[i] && (
            <View>
              <Text style={{ color: "#fff" }}>You Won</Text>
              <Text style={{ textAlign: "center", color: "#fff" }}>
                {amt}
              </Text>
            </View>
          )}
        </View>
      </TouchableHighlight>
    </View>
  );
}

Key Notes: #

• Avoid hardcoding image sources: Your original code used require("./assets/characters/2.png") for all items—using item from imageCharacters[i] ensures each item shows its intended image.
• Use functional state updates: When updating state that depends on previous state (like toggling), always use the functional form of setState to prevent race conditions.
• Unique keys: You're already using key={i} which is good practice for list items in React.

This way, clicking any item will only toggle its own visibility state, leaving the others unchanged.

内容的提问来源于stack exchange，提问作者Komal