javascript - 如何在本机反应中向堆栈图表添加褪色背景

问题描述

我正在尝试创建堆栈图

但现在我只有一条没有褪色背景的线，完成到 100%（我的意思是我只有强调线）。

例如，从床上 8107 的图片中，我不仅有正确的 81% 线，而且我没有 19% 褪色......

如何添加褪色的背景？

这是我的堆栈图代码：

   'use strict'
import React, { Component } from 'react'

import {
 PropTypes,
 View,
 Text,
 Animated,
 StyleSheet,
 TouchableHighlight,
 Dimensions
   } from 'react-native'


export class ComplianceRank extends Component {

 constructor (props) {
super(props)
const data = this.props.data

 }


render () {
return (
  <View style={styles.container}>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 1</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 80}]} />
        }
      <Text style={styles.dataNumber}>{80}%</Text>
    </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 2</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 65}]} />
        }
        <Text style={styles.dataNumber}>{65}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 3</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 60}]} />
        }
        <Text style={styles.dataNumber}>{60}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 4</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 56}]} />
        }
        <Text style={styles.dataNumber}>{56}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 5</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 40}]} />
        }
        <Text style={styles.dataNumber}>{40}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 6</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 20}]} />
        }
        <Text style={styles.dataNumber}>{20}%</Text>
      </View>
    </View>

  </View>
)
 }
}

 const styles = StyleSheet.create({
    container: {
backgroundColor: '#FFF',
flexDirection: 'column',
display:'flex',
marginTop: 6
  },
 // Item
  item: {
flexDirection: 'row',
marginBottom: 5,
paddingHorizontal: 10
  },
label: {
color: '#CBCBCB',
flex: 1,
fontSize: 12,
position: 'relative',
top: 2
 },
 data: {
flex: 2,
flexDirection: 'row'

 },
dataNumber: {
color: '#CBCBCB',
fontSize: 11
 },
// Bar
 bar: {
alignSelf: 'center',
borderRadius: 5,
height: 20,
marginRight: 5
  },
 charColor: {
backgroundColor: '#6FDEDE'
  },
 charColorFaded: {
backgroundColor: '#d5f6f6'
 }
})

我是 React Native 的新手，所以如果是初学者的问题，我很抱歉。

标签： javascriptcssreact-nativechart.js

<View style={styles.data}> <View style={[styles.bar, styles.charColorFaded]}> <Animated.View style={[styles.charColor, {width: 20}]} /> </View> <Text style={styles.dataNumber}>{20}%</Text> </View>

javascript - 如何在本机反应中向堆栈图表添加褪色背景

问题描述

解决方案

推荐阅读