制作动画时道具'paddingLeft'无效

Question

我正在尝试使用 React 原生动画来删除填充（通过使其0），然后将其放回原处。

以下代码用于管理动画：

  componentWillMount() {
    this.animatedValueLateralPadding = new Animated.Value(Constants.LIST_ITEM_MARGIN * this.props.dimensions.windowWidth);
  }

componentWillReceiveProps(nextProps) {
    if(nextProps.index == this.props.element.ordinalNumber) {
      Animated.stagger(Constants.RESIZED_TIME, [
        Animated.parallel([
          Animated.timing(this.animatedValueLateralPadding, {
              toValue: 0,
              duration: Constants.RESIZE_TRANSITION_TIME
            }),
          ]),
        Animated.parallel([
          Animated.timing(this.animatedValueLateralPadding, {
              toValue: Constants.LIST_ITEM_MARGIN * nextProps.dimensions.windowWidth,
              duration: Constants.RESIZE_TRANSITION_TIME
            }),
          ])
      ]).start();
    }
  }

在我的render方法中，我指定了这样的样式：

  const animatedStyle = {paddingLeft: this.animatedValueLateralPadding, paddingRight: this.animatedValueLateralPadding};

然后在返回的此组件中使用animatedStyle：

    <ScrollView
      contentContainerStyle={[listStyles.container, animatedStyle]}
      > 
     //some other code

样式的其余部分是这样的：

const listStyles = StyleSheet.create({
  container: {
    backgroundColor: Constants.COLOR_BLACK,
    minHeight: '100%'
  }
});

问题是填充不会消失，我收到此警告：

Failed prop type:Invalid prop 'paddingLeft' supplied to 'ScrollView'. Bad object:
{
  "backgroundColor": "#000000",
  "minHeight": "100%",
  "paddingLeft": 18,
  "paddingRight": 18
}

我不明白为什么它不喜欢我指定paddingLeft的方式.

我尝试传递一个String，而不是Int全部传递给Animated.Value对象：

this.animatedValueLateralPadding = new Animated.Value(String.valueOf(Constants.LIST_ITEM_MARGIN * this.props.dimensions.windowWidth));

和

 toValue: String.valueOf(0),

和

 toValue: String.valueOf(Constants.LIST_ITEM_MARGIN * nextProps.dimensions.windowWidth)

但是，我得到：

Error while updating property: 'paddingLeft' in shadow node of type: RCTView
null
Unknown value: function String() {
   [native code]
}0

那么为什么我指定填充的方式有问题呢？ 知道如何解决这个问题吗？

Answer 1

您需要使用Animated组件，例如 Animated.View ，Animated.Text才能拥有此动画。考虑阅读以下内容：https://facebook.github.io/react-native/docs/animations.html

只需将ScrollView更改为Animated.ScrollView