ReactNative实现的转动光盘+音乐播放

一、所需要的第三方库：

yarn add react-native-vector-icons react-native-video

package.json

{
  "name": "myReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.1",
    "react-native": "0.64.1",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

二、示例代码：

import React, { Component } from 'react'
import {  View,Animated,StyleSheet,TouchableHighlight } from 'react-native'
import { linear } from 'react-native/Libraries/Animated/Easing'
import Entypo from 'react-native-vector-icons/Entypo'
import Video from 'react-native-video'
//音乐和图像的部分，可以根据情况进行更换
let uri="http://39.100.242.209/cafe/ice.jpeg"
let musicUri="http://39.100.242.209/mp3/"
let music=['yong.mp3','skycity.mp3','我.mp3']
export default class App extends Component {
  state={rotate:new Animated.Value(0),paused:true,index:0}
  currentRotate=0
  
  componentDidMount(){
    //获取动画的当前值
    this.state.rotate.addListener(({value})=>{this.currentRotate=value})
  }
  _play=()=>{
    //toValue每次启动时，在当前值的基础上增加360的补偿
    let an=Animated.loop(Animated.timing(this.state.rotate,
      {useNativeDriver:true,duration:5000,toValue:this.currentRotate+360,easing:linear}))
    let paused=this.state.paused
    if(paused) an.start()
    else an.stop()
    this.setState({paused:!paused})
  }
  render() {
    //利用插值方法进行映射
    let style={transform:[{rotate:this.state.rotate.interpolate({
      inputRange:[0,360],outputRange:['0deg','360deg']
    })}]}
    return (
      <View style={{flex:1,backgroundColor:'antiquewhite',alignItems:'center'}}>
        <Video  paused={this.state.paused} 
        source={{uri:musicUri+music[this.state.index]}}/>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Animated.Image style={[styles.disc,style]} source={{uri:uri}}/>
        </View>
        <TouchableHighlight style={styles.btn} onPress={this._play} >
          <Entypo name={this.state.paused?"controller-play":"controller-paus"} size={60} color={"blue"}/>
        </TouchableHighlight>     
      </View>
    )
  }
}
const styles = StyleSheet.create({
  disc:{width:400,height:400,borderRadius:200},
  btn:{justifyContent:'center',alignItems:'center'
  ,width:90,height:90,borderRadius:45,borderBottomColor:'blue',borderWidth:1}
})