Question

使用案例

我有一张卡片列表，我正在尝试创建一个向左/向右滑动式滑动功能。我已经使用panResponder进行了滑动，但遇到了动画backgroundColor的问题

SETUP

constructor() {
  super();

  this.state = {
    bgColor: new Animated.Value(0),
  };
}

onPanResponderMove: (evt, gestureState) => {
  Animated.timing(this.state.bgColor, {
              toValue: 1,
              duration: 100,
            }).start();
}

render() {
    const s = this.state;
    const p = this.props;

    const bgColor = s.bgColor.interpolate({
       inputRange: [0, 1],
       outputRange: [colors.gray.one, colors.primary.light]
    })

    return(
      <View style={ [styles.wrapper, pushLeft(s.dx)] }>
        <View {...this._panResponder.panHandlers} style={ styles.content } onLayout={ this.onLayout }>
          { this.props.children }
          <View style={ [styles.overlay, { backgroundColor: bgColor } ]}/>
        </View>
      </View>
    )
  }

错误

一旦我开始拖动卡片

＆＃34;无法添加属性_tracking，对象不可扩展＆＃34;

其他说明

如果我使用下面的代码将插值赋值替换为bgColor，我不会得到错误，但显然会失去颜色的动画效果。

const bgColor = s.bgColor._value === 0 ? colors.gray.one : colors.primary.light;

问题

关于为什么会抛出错误以及如何解决错误的想法？

Answer 1

要使用动画，您需要一个特殊的“动画”组件（Animated.View，Animated.Text或Animated.Image，它们都是内置的，或使用{{1创建一个新组件}}）。这可能是你的问题吗？

无法添加属性_tracking，对象不可扩展

1 个答案: