最近项目重构，使用了React Native来进行重写，在还原之前原生实现的波浪动画。之前不知道React Native中有ART这个库，本打算使用h5中的canvas来实现波浪动画，捣鼓了半天没有搞出来。后来又重新Google如何React Native来实现动画效果，找到几篇不错的文章介绍到了React Native ART库的使用。
今天刚好使用React Native还原了之前项目中的波浪动画，于是趁热打铁整理下我的实现思路和大家分享下我的心路历程。
React Native ART 究竟是什么?
所谓ART，是一个在React中绘制矢量图形的JS类库。这个类库抽象了一系统的通用接口，统一了SVG，canvas，VML这类矢量图形在React中的书写格式。你可以通过ART将SVG，canvas，VML的矢量图形拿到React中使用，也可以把ART反转回去。（虽然有很多局限性，后面会讲到）
React Native ART 是react-art在React Native中的移植版，接口几乎完全一致，
React Native中的ART很早之前就已经开源了iOS版，最近又在0.18.0中开源了Android版本
因为缺少官方文档，一直不为人所知。但是通过万能的Google，搜索到一篇文章，里面详细介绍了ART的使用（请参考文章末尾的参考链接）。
如何在React Native中使用 ART？
在安卓中使用无需配置任何东西就可使用，在iOS中ART是可选的，你需要手动导入ART.xcodeproj文件，并手动导入libART.a静态库。
iOS项目中配置ART的具体方式如下：
- 在Xcode选中项目点击右键->Add Files to
Your Project Name->选择添加Project path/node_modules/react-native/Libraries/ART/ART.xcodeproj。 - 在Build Phases中的Link Binary With Libraries中点击+号，选择添加
libART.a。
波浪实现
接下来就可以尽情使用ART了，我用ART实现了我的充电波浪动画，效果图如下：
图中所有元素均有ART组件实现，代码我已提交至我的GitHub，欢迎大家参考。
关于波浪的绘制逻辑与之前的一篇《CGContextRef绘图－iOS球形波浪加载进度控件－HcdProcessView详解》是一样的。
如何使用
使用如下代码安装react-native-art-hcdwave到项目中。
npm i react-native-art-hcdwave
然后再需要使用的地方，按照如下方法使用即可。
import React, {Component} from 'react';
import {
StyleSheet,
View
} from 'react-native';
import { HcdWaveView } from './src/components/HcdWaveView'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<HcdWaveView
surfaceWidth = {230}
surfaceHeigth ={230}
powerPercent = {76}
type="dc"
style = {{backgroundColor:'#FF7800'}}></HcdWaveView>
<HcdWaveView
surfaceWidth = {230}
surfaceHeigth ={230}
powerPercent = {76}
type="ac"
style = {{backgroundColor:'#FF7800'}}></HcdWaveView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#18A4FD',
}
});
