加载线在2个值之间跳动

时间:2018-09-17 06:14:10

标签: react-native animation

我正在尝试以本机方式重新创建this animation,但遇到了一些麻烦。我无法弄清楚如何将视图反弹回原始位置,并使其保持无限循环,直到卸载组件为止。任何建议或指示都将有所帮助。

import React, { Component } from 'react';
import { View, Text, Dimensions, Animated } from 'react-native';

const { width, height } = Dimensions.get('window');

class Loading extends Component {

    _loadingWidth = new Animated.Value(0);

    componentDidMount() {
        Animated.timing(this._loadingWidth, {
            toValue: width,
            duration: 20
        }).start();
    }

    render() {
        return (
            <Animated.View style={{ backgroundColor: 'red', width: this._loadingWidth, height: 10 }}>

            </Animated.View>
        );
    }
}

export { Loading }

0 个答案:

没有答案