在決定做一次loading動畫的時候，我首先看了一下官方文檔：React Native Animated的使用。不過官方文檔看得云里霧里，必須通過自己動手才能真正了解怎么做。
首先需要在自定義view(當然也可以不自定義，不過建議最好這種view可以自己定義防止state與其他view沖突）。在自定義view的constructor方法中，需要對動畫初始值進行設置：
constructor(props) {
super(props);
this.state = {
rotateValue: new Animated.Value(0),
};
}
接著需要實現動畫的邏輯rotateValue其實是作為一個會變動的值，通過值的變動來更新view的顯示效果的。第二步在componentDidMount方法中執行動畫：
componentDidMount() {
this.state.rotateValue.setValue(0);
Animated.timing(this.state.rotateValue,{
toValue: 360*TIMES,
duration: 800*TIMES,
easing: Easing.linear
}).start();// 開始spring動畫
}
timing方法的說明是，從時間的范圍來改變漸變的值，其中第一個參數就是需要變化的值，toValue就是要變動到的值，在這里設置的比較大，就是讓他一直旋轉。durationg是持續時間。easing是漸變函數，類似于android中的插值器，linear就是線性變化LinearInterpolator。
最后就是render view了，先看下代碼：
render() {
return (
<View style={styles.paginationView}>
<Animated.Image
style = {[styles.bottom_loading_style,
{transform:[{rotate: this.state.rotateValue
.interpolate({inputRange: [0, 360],outputRange: ['0deg', '360deg']})
}]
}]}
source = {THUMB_URLS[0]}
resizeMode = "contain"/>
<Image style = {styles.title_btn_style}
source = {THUMB_URLS[1]} resizeMode = "contain"/>
</View>
);
}
重點在第一個Image的style設置，因為RN規定了一些View可以直接使用Animated，其中有View，Text，Image，所以在需要使用Animated的地方需要使用Animated.Image。動畫的設置也是以style的方式加進去的，此處需要設置多個style所以用到了大括號，當然也可以直接寫進style中。
后面的transform用來設置組合動畫，我這里使用了一個，然后通過插值器的方法將值轉換到角度的變化。最開始的時候我并沒有使用插值器，而是直接用rotate: 0 ，來進行設置，但是卻提示在使用rotate這個動畫的時候不能使用int而應該用string，而這時候如果更換成 rotate: '0deg',則會提示
error while updating property transform of a view managed by RCTImageVIew
這個確實很奇怪，在stackoverflow上查了很久發現很多人說是RN版本問題，最后通過插值器的方法將int轉換成他需要的deg才算圓滿結束。
