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"

，这都可以

但是，当我使用interpolate（）时，我收到此错误：Transform with key of "rotate" must be a string: {"rotate":"0deg"}

似乎Interpolate没有返回字符串。我尝试使用＆＃34; toString（）＆＃34;对它进行类型转换。但后来我收到了这个错误：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

Interpolate是一个函数，其结果仅用于声明的“动画”类，因此您需要添加“动画”。到你的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>
    );
}

Answer 2

我遇到了同样的问题

只需使用<Animated.Text>代替<Text />

React Native：转换为＆＃34;旋转＆＃34;必须是一个字符串：{＆＃34;旋转＆＃34;：＆＃34; 0deg＆＃34;}

2 个答案: