React Native：使用“rotate”键的转换必须是字符串：{“rotate”：“0deg”}

Question

好像我在文档中做了所有事情，并引用了其他示例。

试图动画文本组件旋转：

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



spin =() => { 
    this.state.rotateAnimation.setValue(0); 

    Animated.timing(this.state.rotateAnimation, { 
     toValue: 1, 
     duration: 3000, 
     easing: Easing.linear 
    }).start((animation) => { 
     if (animation.finished) { 
      this.spin(); 
     } 
    }); 
}; 


render() { 
    return (
     <Content> 
      <View> 
       <Text style={{ 
        transform: [ 
         { 
          rotate: 
          this.state.rotateAnimation.interpolate({ 
           inputRange: [0, 1], 
           outputRange: ["0deg", "360deg"] 
          }) 
         } 
        ] 

       } ]}>{this.FAIcons.circleONotch}</Text> 
      </View> 
     </Content> 
    ); 
} 

，如果我手动在任何程度即进入正常工作rotate: "90deg"

然而，当我使用插值（），我得到这个错误：Transform with key of "rotate" must be a string: {"rotate":"0deg"}

看起来像Interpolate没有返回字符串。我试图用它来强制转换“的toString（）”但后来我得到这个错误：Rotate transform must be expressed in degrees (deg) or radians (rad): {"rotate":"[object Object]"}

我跟着这个文档：https://facebook.github.io/react-native/docs/animations.html

和引用的这个例子：https://gist.github.com/levynir/5962de39879a0b8eb1a2fd77ccedb2d8

我在做什么错在这里？

**** ****编辑

感谢@Guilherme Cronemberger指着我在正确的方向，你需要创建一个这样的组件。

render() { 

     const StyledAnimatedText = Animated.createAnimatedComponent(Text); 

} 

然后利用这样的：

return (
    <StyledAnimatedText 

     style={{ 
      fontFamily: 'FontAwesome', 
      backgroundColor: 'transparent', 
      transform: [{ 
        rotate: this.state.rotateAnimation.interpolate({ 
           inputRange: [0, 1], 
           outputRange: ["0deg", "360deg"] 
          }) 
         }, 
         { perspective: 1000 }] 

         }}> 
     {this.FAIcons.circleONotch} 
    </StyledAnimatedText> 
) 

Answer 1

插值是结果只用在声明为“动画”类的功能，所以你添加“动画”。到你的Text类。

render() { 

    var rotateProp = this.state.rotateAnimation.interpolate({ 
          inputRange: [0, 1], 
          outputRange: ["0deg", "360deg"] 
         }) 
    console.log(rotateProp) //just to check if it's returning what you want 
    return (
     <Content> 
      <View> 
       <Animated.Text style={{ 
        transform: [ 
         { 
          rotate: rotateProp 
         } 
        ] 

       } ]}>{this.FAIcons.circleONotch}</Animated.Text> 
      </View> 
     </Content> 
    ); 
}