React native 以不同颜色显示本机中的直线

如何创建如图所示的UI。我需要创建显示不同颜色指示器的直线来显示会话。任何帮助都将不胜感激

---

@smitha，我不知道你是谁，把这个打印出来就行了。我认为，它将返回您所期望的相同结果。如果你转发任何东西，请告诉我

   <View style={{height: 5,flex:0, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#ececec'}}>
                            <View style={{height: 5, backgroundColor: '#0472fe', width: 20,borderRadius: 5}}></View>
                            <View style={{height: 5, backgroundColor: '#ff0000', width: 20,borderRadius: 5}}></View>
                            <View style={{height: 5, backgroundColor: '#0472fe', width: 20,borderRadius: 5}}></View>
                            <View style={{height: 5, backgroundColor: '#0472fe', width: 20,borderRadius: 5}}></View>
                        </View>

您希望颜色指示器位于直线上的任何位置或要高亮显示的特定位置？这意味着给定的图像根据时间显示高光。这就是为什么。尝试使用

https://github.com/hectahertz/react-native-color

或自定义view@Elango基于时间，我想在上面突出颜色line@NooruddinLakhani是一个滑块。我不想要滑块。它只是一个简单的直线视图或显示不同时间指示器的直线。@Elago我可以使用平面列表而不是视图来显示不同的时间指示器吗会议时间？平面列表是否可行？我不知道FL是否可行，让我检查一下。