在组件 ProgressBarAndroid 中,有一个名为 indeterminable={Boolean} 的属性,它向用户展示了正在进行的动画。我想在 ProgressViewIOS 上实现几乎相同的效果。因此,我尝试使用 Animated 来进行动画处理...
我在 Animated 的文档中看到了一个名为 'createAnimatedComponent' 的方法,他们用它来创建 Animated.View
我尝试创建另一个 Animated(Native)组件,但是它根本不起作用。 该动画应逐渐将 fillValue 提高到 20%,然后继续使用媒体上传的原始值...
这是我的组件:
// ProgressBar.ios.js
// @flow
import { PropTypes } from 'react';
import Component from 'components/base/Component';
import { ProgressViewIOS, Animated } from 'react-native';
const AnimatedProgressViewIOS = Animated.createAnimatedComponent(ProgressViewIOS);
class ProgressBarIOS extends Component {
static propTypes = {
// Percentage (0 - 100)
fill: PropTypes.number.isRequired,
};
constructor(props, context: any) {
super(props, context);
this.state = {
fillValue: new Animated.Value(props.fill),
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.fill === 0) {
Animated.timing(this.state.fillValue, { toValue: 0.2, duration: 500 }).start();
} else if (nextProps.fill > 19) {
this.state.fillValue.setValue(nextProps.fill / 100);
}
}
shouldComponentUpdate(nextProps) {
return this.props.fill !== nextProps.fill;
}
render() {
return (
<AnimatedProgressViewIOS
style={{ alignSelf: 'stretch' }}
progress={this.state.fillValue} />
);
}
}
export default ProgressBarIOS;
编辑:AnimatedComponent仅用于修改样式。可以将道具作为动画值传递,但请记住它不是数字!