react-native – React Native：使用“rotate”键进行转换必须是

发布时间：2020-12-15 20:30:56 所属栏目：百科来源：网络整理

导读：好像我在文档中做了所有事情并引用了其他示例. 尝试为文本组件旋转设置动画： this.state = { rotateAnimation: new Animated.Value(0),};spin = () = { this.state.rotateAnimation.setValue(0); Animated.timing(this.state.rotateAnimation,{ toValue: 1,

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

尝试为文本组件旋转设置动画：

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>
    );
}

如果我手动输入任何程度,即旋转：“90deg”,这样可以正常工作

但是,当我使用interpolate()时,我得到这个错误：使用“rotate”键进行转换必须是一个字符串：{“rotate”：“0deg”}

似乎Interpolate没有返回一个字符串.我尝试使用“toString()”对其进行类型转换,但后来我得到了这个错误：旋转变换必须以度(度)或弧度(弧度)表示：{“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,"360deg"]
                            })
                        },{ perspective: 1000 }]

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

解决方法

Interpolate是一个函数,其结果仅用于声明的“动画”类,因此您需要添加“动画”.到你的Text课程.

render() {

    var rotateProp =    this.state.rotateAnimation.interpolate({
                             inputRange: [0,"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>
    );
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!