如何让视图以特定的间隔填充？

【问题标题】：How to Make View Filled in at Certain Intervals?如何让视图以特定的间隔填充？
【发布时间】：2021-07-13 21:18:21
【问题描述】：

我目前正在尝试创建一个条形图，该条形图根据从 1440 中输入的数字数组（一天中的分钟数）填充。例如，如果输入 [3, 400]，则视图会用某种颜色填充对应于 3-400 分钟的区域。

我不确定从哪里开始，因为我唯一的想法是用 1440 个其他视图填充父视图，然后我可以根据输入填充这些视图，这当然不是一个好主意。任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

我想我明白了。这是我的解决方案：

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

export default function TimeAvailabilityIndicator() {
    const testArray = [[130, 210], [1000, 1300], [500, 800]]

    const minuteToPercentageConverter = (minute) => {
        return (minute * 100) / 1440
    }


    return (
        <View style={styles.parentView}>
            {testArray.map(time => {
                return <View
                    style={{
                        position: 'absolute',
                        left: minuteToPercentageConverter(time[0]) + '%',
                        right: (100 - minuteToPercentageConverter(time[1])) + '%',
                        height: 16,
                        backgroundColor: 'red'
                    }}
                />
            })}
        </View>
    )
}

const styles = StyleSheet.create({
    parentView: {
        borderColor: 'black',
        borderWidth: 2,
        height: 20,
        marginTop: 10,
        position: 'relative'
   }
})

【讨论】：