我继承了下面的组件,它与react-native的以前版本配合得很好,在其他组件显示的按钮上显示一个不透明的滚动进度条。
最近,当我升级到react-native 0.62.2时,我遇到了一个错误,请求添加useNativeDriver
。当添加它并设置为'yes'时,我得到一个错误,说“style property 'width' is not supported by native animated module
”。
当设置useNativeDriver
为false时,我没有得到错误,但动画不起作用(至少在android上不起作用。没有在iOS上测试)。
对于如何修改代码以使其与最新版本的react-native一起工作,有什么建议吗?
import React, { Component } from 'react';
import { Animated, Easing } from 'react-native';
import { connect } from 'react-redux';
class ProgressBar_Module extends Component {
constructor(props) {
super(props);
this.state = {
progress: 0
}
this.d_isMounted = false;
this.d_initialTime = 0;
this.d_animation_width = new Animated.Value(1);
this.d_animation_progressTime = 3000;
}
componentDidMount() {
this.d_initialTime = Date.now();
this.d_isMounted = true;
this.progressCount();
}
componentDidUpdate(prevProps) {
if(prevProps.timerStart < this.props.timerStart) {
this.setState({
animation_width: new Animated.Value(1),
animation_progressTime: 3000
});
this.progressCount(true)
}
}
componentWillUnmount() {
this.d_isMounted = false;
}
progressCount = (reset) => {
if( reset ) {
this.d_animation_width = new Animated.Value(1);
this.d_animation_progressTime = 3000;
}
Animated.timing(this.d_animation_width, {
toValue: 175,
duration: this.d_animation_progressTime,
easing: Easing.linear
}).start(() => {
if(this.props.timer && this.d_animation_width.__getValue() === 175) {
this.props.onPress();
}
})
}
render() {
return (
<Animated.View
style={[
{
position: 'absolute',
left: 0,
height: '150%',
width: 0,
zIndex: 1,
backgroundColor: 'black',
},
{ width: this.props.timer !== false ?
this.d_animation_width : 175 }
]}
onPress={this.props.onPress}
>
</Animated.View>
)
}
}
const mapStateToProps = state => {
return {
timer: state.get('ui').get('timer').get('timer'),
reset: state.get('ui').get('resetTimer').get('resetTimer'),
timerStart: state.get('ui').get('resetTimer').get('timerStart')
}
};
export const ProgressBar = connect(mapStateToProps)(ProgressBar_Module);
字符串
4条答案
按热度按时间57hvy0tb1#
试试看。
字符串
对我很有效。
cigdeys32#
尝试使用transform和scaleX,而不是动画宽度。下面是一些对原生变换进行React的参考:https://reactnative.dev/docs/transforms
inb24sb23#
根据@YaNuSH的建议,我只需要更换
字符串
与:
型
详细信息:
之前:
型
之后:
型
之前:
型
之后:
型
ldioqlga4#
字符串
就这样享受你的编程…