本机动画模块不支持样式属性“宽度”：需要建议以重写我的代码 之前：之后：之前：之后：

问题描述

我继承了以下组件，该组件与早期版本的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);

解决方法

请尝试使用transform和scaleX代替动画宽度。 以下是一些响应本机转换的参考： similar question

,

尝试这样做。

useNativeDriver: false

它对我有用。

,

按照@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,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',width: 2,{
        transform: [
          {
            scaleX: scaling
          },],]}
    onPress={this.props.onPress}
  >
  </Animated.View>
)