javascript - 如何在React Native中向堆栈图添加褪色的背景

我正在尝试创建堆栈图

但是现在我只有没有完全消失的背景的线条，可以完全达到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的新手，所以很抱歉，如果是初学者的问题。

最佳答案

尝试以这种方式包装动画视图并更改样式：

  <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 - 如何在React Native中向堆栈图添加褪色的背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52873834/