Question

这是一个反应原生的项目：

我有一个进度条，有10个位置，每个位置可能有三个状态 - 不完整，有效，完整。有一个图像对应于每个状态。我以为我可以使用for循环来查找页面的索引号，我将它存储在一个对象中，并且取决于循环中的位置和索引号之间的关系，这将决定哪个图像显示。像这样：

if the position in the loop > index number, display the incomplete image

if the position in the loop = index number, display the active image

if the position in the loop < index number, display the complete image

除此之外，我甚至不确定从哪里开始。

Answer 1

在你的课程/组件中：

  state = {
    indexNum: 4, // arbitrary value
  }

  displayStatus(item) {
    if(item.id > this.state.indexNum){ // Incomplete
      return <View style={styles.progressPoint}><Text>I</Text></View>;
    }
    else if(item.id == this.state.indexNum){ // Active
      return <View style={styles.progressPoint}><Text>A</Text></View>;
    }
    else if(item.id < this.state.indexNum){ // Complete : you can use only 'else' here
      return <View style={styles.progressPoint}><Text>C</Text></View>;
    }

  }

在您班级/组件的render()中：

    // Positions/Pages - these will serve as basis for .map - you can add more than 'id'
    const positions  = [{"id": 1},{"id": 2},{"id": 3},{"id": 4},{"id": 5},
                       {"id": 6},{"id": 7},{"id": 8},{"id": 9},{"id": 10}];
    return (
       <View style={styles.container}>
          {positions.map((item) => (
             this.displayStatus(item)
          ))}
       </View>
    );

以上Expo Snack以上（基于您的问题范围）让您入门。

您可以将页面的索引号存储在状态中，并在每个进度位置完成时更新此状态。注意：如果您不使用redux，则可能需要单独传递/处理每个页面上的状态（索引号）（具体取决于您的导航或组件结构）。

如何使用for循环根据索引中的位置显示图像？

1 个答案: