无法将React Native Animated值设置为View组件CSS样式

Jac*_*ish 3 animation view animated react-native

我正在尝试使用View组件样式动画.我按照这里列出的例子:https://facebook.github.io/react-native/docs/animations.html

但是,当我渲染我的组件时,我得到错误:

[tid:com.facebook.React.ShadowQueue] [RCTConvert.m:55]使用标记#7设置RCTView的属性"height"时出错:JSON值'{"_ animation"=""; "_children"=(); "_listeners"= {}; "_offset"= 0; "_value"= 200; }'类型NSDictionary无法转换为NSNumber

这就是我在构造函数中设置Animated值的方法:

  constructor() {
    super();
    this.state = {
      titleContainerHeight: new Animated.Value(200),
    }
  }
Run Code Online (Sandbox Code Playgroud)

以下是我的看法:

<View style={[styles.titleContainer,{height:this.state.titleContainerHeight}]}>
  <Text style={[{color: 'white'}]}>App logo here</Text>
</View>
Run Code Online (Sandbox Code Playgroud)

好像我正在处理文档描述的所有内容,而且我在另一个组件中做同样的事情而没有出现任何错误.那么,这里有什么问题?

Jac*_*ish 19

啊没关系,我发现我做错了什么.我忘了专门使用"Animated.View"组件.这有效:

<Animated.View style={[styles.titleContainer,{height:this.state.titleContainerHeight}]}>
  <Text style={[{color: 'white'}]}>App logo here</Text>
</Animated.View>
Run Code Online (Sandbox Code Playgroud)

  • 谢谢,我也是这样做的.当您开始使用普通视图然后想要"稍后"添加动画时,很容易忘记. (2认同)