如何根据条件在ScrollView中换行或换行

Question

我想要实现类似于第一张图片中的东西，如果条件为真，视图将被放在同一行中，如果不是，则下一个视图必须放在下一行中。

​

​

在我的应用程序中，我现在有这样的结果：

​

​

代码如下：

<ScrollView contentContainerStyle={styles.exercisesContainer}>
            {item.category_workouts.map((exercice, index) => (
              <Exercises
                key={index}
                img={AssetsManager.Images.exerciseImg}
                title={exercice.workout_name}
                level={exercice.level}
              />
            ))}

//
//
 exercisesContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },

Answer 1

找到了我的问题的解决方案。使用一个函数，我根据他的属性level计算每个元素的with。示例：

• 如果第一个元素的级别是“初学者”，下一个元素是“中”，则第一个元素的宽度将为“100%”，因此将采用孔线，并且因为他是唯一的“初学者”元素。
• 如果我们有三个相同级别的元素，则可能会为每个元素提供“33%”的宽度。

下面是我的函数，但是它需要一些重构：

const getExercicesWidth = exercices => {
    const exercicesLevels = [];
    exercices.forEach(exercice => {
      exercicesLevels.push(exercice.level);
    });
    let widthArray = [];
    let counter = 1;
    for (let i = 0; i < exercicesLevels.length; i++) {
      if (i === 0) {
        continue;
      }
      if (exercicesLevels[i] == exercicesLevels[i - 1]) {
        counter++;
      } else {
        widthArray.push(counter);
        counter = 1;
      }
    }
    widthArray.push(counter);
    const percentageWidthArray = [];
    widthArray.forEach(number => {
      let c = number;
      while (c > 0) {
        percentageWidthArray.push(`${Math.round(100 / number)}%`);
        c--;
      }
    });
    return percentageWidthArray;
  };

现在结果是这样的：

​

​