无效道具' paddingLeft'在做动画时

时间:2017-11-01 11:21:04

标签: javascript react-native

我正在尝试使用React Native Animation删除填充(通过使其成为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

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

1 个答案:

答案 0 :(得分:1)

您需要使用AnimatedAnimated.View之类的Animated.Text组件来制作此动画。 请考虑阅读:https://facebook.github.io/react-native/docs/animations.html

只需将ScrollView更改为Animated.ScrollView

即可