Question

在这里，我将添加源代码和当前图形的图像

这是index.js，我使用子组件AnimatedBar绘制每个条形列。我生成了随机高度，并将其传递给子组件。

 componentDidMount() {
    this.generateData();
    // this.interval = setInterval(() => {
    //   this.generateData();
    // }, 1000);   }

  componentWillUnmount() {
    clearInterval(this.interval);   }

  generateData = () => {
    const data = [];
    for (let i = 0; i < 10; i++) {
      data.push(Math.floor(Math.random() * window.width));
    }

    this.setState({
      data,
    });   }

  render() {
    return (
      <View style={{ flex: 1,flexDirection:"column", backgroundColor: '#F5FCFF', justifyContent: 'center'}}>
        <View style={{flexDirection:"row",justifyContent: 'flex-end'}}>
          {this.state.data.map((value, index) => <AnimatedBar value={value} delay={DELAY * index} key={index} />)}
        </View>
      </View>
    );   }

在这里我添加了子组件

class AnimatedBar extends Component {
  constructor(props) {
    super(props);

    this._width = new Animated.Value(0);
    this.state = {
      color: randomcolor(),
    };
  }

  componentDidMount() {
    this.animateTo( this.props.value);
  }

  componentWillReceiveProps(nextProps) {
    this.animateTo( nextProps.value);
  }

  animateTo = (value) => {
    // Animated.sequence([
    //   Animated.delay(delay),
    //   Animated.timing(this._width, {
    //     toValue: value,
    //   }),
    // ]).start();
    Animated.timing(this._width, {
         toValue: value,
        }).start();

  }

  render() {
    const barStyles = {
      backgroundColor: this.state.color,
      height: this._width,
      width:40,
      borderTopRightRadius: 4,
      borderBottomRightRadius: 4,
    };

    return (
      <Animated.View style={barStyles} />
    );
  }
}

问题是我的条形图加载到下方。我只需要使它正确。我该如何解决这个问题？先谢谢了。在这里，我附上了图形的当前图像。

Answer 1

Animated.timing(this._width, {
         toValue: value,
        }).start();

如果将正值传递给 toValue 变量，则小节将向下；如果将负值传递给 toValue 变量，则小节将向上。

尝试将负值传递给toValue，例如：

Animated.timing(this._width, {
         toValue: -30,
        }).start();

条形图动画问题-反应本机

1 个答案: