在 React Native 中使用 ART 绘制波浪动画

最近项目重构，使用了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的具体方式如下：

1. 在Xcode选中项目点击右键->Add Files to Your Project Name->选择添加Project path/node_modules/react-native/Libraries/ART/ART.xcodeproj。
2. 在Build Phases中的Link Binary With Libraries中点击+号，选择添加libART.a。

波浪实现

接下来就可以尽情使用ART了，我用ART实现了我的充电波浪动画，效果图如下：

react-native-art-hcdwave

图中所有元素均有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',
  }
});

参考文章

《在 React Native 中使用 ART》
《react-native之ART绘图详解》