本机动画模块不支持样式属性'width'：需要重写代码的建议

Question

我继承了以下组件，该组件与以前版本的react native配合良好，在其他组件显示的按钮上显示不透明的滚动进度条。

最近，当我升级到react native 0.62.2时，我收到了一个请求添加useNativeDriver的错误。当添加它并将其设置为"是"时，我出现了一个错误，说"；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);

Answer 1

尝试这样做。

useNativeDriver: false

它对我有效。

Answer 2

不要设置宽度的动画，而是尝试使用transform和scaleX。以下是一些对本地转换进行反应的参考：https://reactnative.dev/docs/transforms

Answer 3

根据@YaNuSH的建议，我只需要更换

width: animatedValue

带有：

transform: [{ scaleX: scaling }],

完整详细信息：

之前：

Animated.timing(this.d_animation_width, {
toValue: 175,
duration: this.d_animation_progressTime,
easing: Easing.linear
}).start(()

之后：

Animated.timing(this.d_animation_width, {
toValue: 175,
duration: this.d_animation_progressTime,
easing: Easing.linear,
useNativeDriver: true
}).start(()

之前：

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 scaling = this.props.timer !== false ? this.d_animation_width : 175;
return (
<Animated.View
style={[
{
position: 'absolute',
left: 0,
height: '150%',
width: 2,
zIndex: 1,
backgroundColor: 'black',
},
{
transform: [
{
scaleX: scaling
},
],
},
]}
onPress={this.props.onPress}
>
</Animated.View>
)

Answer 4

Animated.timing(this.loadingValue.width, {
toValue: widthEnd,
duration: 400,
useNativeDriver: false //add this line into the library
}).start();
Animated.timing(this.loadingValue.borderRadius, {
toValue: borderRadiusEnd,
duration: 400,
useNativeDriver: false //add this line into the library
}).start();
Animated.timing(this.loadingValue.opacity, {
toValue: opacityEnd,
duration: 300,
useNativeDriver: false //add this line into the library
}).start();

仅此而已。。。享受你的编码。。。