React-Native Animated.createAnimatedComponent
React-Native Animated.createAnimatedComponent
export function createAnimatedComponent(component: any): any;
可以将自定义的组件转变成支持动画的组件
大概就是:CustomComponent =>Animated.View
举例实现:自定义一个组件,动画改变其宽高
![](https://upload-images.jianshu.io/upload_images/23011-9f6ef5f0aedc264f.gif?imageMogr2/auto-orient/strip|imageView2/2/w/420/format/webp)
QQ20181106-150802.gif
class Sub extends PureComponent { render() { const {width, height} = this.props return ( <View style={{width,height,backgroundColor: 'blue'}}> </View> ); } } const ABC = Animated.createAnimatedComponent(Sub) constructor(props) { super(props); this.state = { width: new Animated.Value(0), height: new Animated.Value(0) } } componentDidMount(){ Animated.parallel([ Animated.timing(this.state.width,{ toValue: 200, duration: 5000 }), Animated.timing(this.state.height,{ toValue: 200, duration: 5000 }) ]).start() } <ABC width={this.state.width} height={this.state.height}/>