如何解决如何根据条件在ScrollView中换行或换行
我想要实现类似于第一张图中的图像,如果条件为真,则将视图放置在同一行中;否则,必须将下一个视图放置在下一行中。
在我的应用中,我现在得到以下结果:
该代码:
<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',},
解决方法
找到了解决我问题的方法。我使用函数根据其属性level
计算每个元素的with。
例子:
- 如果第一个元素的水平为“初学者”,下一个为“中等”,则第一个元素的宽度为“ 100%”,因此占据了孔线,因为他是唯一的“初学者”元素。 / li>
- 如果我们具有三个级别相同的元素(可能是“高级”),则每个元素的宽度将为“ 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;
};
现在的结果是这样的:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。