在决定做一次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才算圆满结束。