最近項目重構(gòu)，使用了React Native來進行重寫，在還原之前原生實現(xiàn)的波浪動畫。之前不知道React Native中有ART這個庫，本打算使用h5中的canvas來實現(xiàn)波浪動畫，搗鼓了半天沒有搞出來。后來又重新Google如何React Native來實現(xiàn)動畫效果，找到幾篇不錯的文章介紹到了React Native ART庫的使用。

今天剛好使用React Native還原了之前項目中的波浪動畫，于是趁熱打鐵整理下我的實現(xiàn)思路和大家分享下我的心路歷程。

React Native ART 究竟是什么?

所謂ART，是一個在React中繪制矢量圖形的JS類庫。這個類庫抽象了一系統(tǒng)的通用接口，統(tǒng)一了SVG，canvas，VML這類矢量圖形在React中的書寫格式。你可以通過ART將SVG，canvas，VML的矢量圖形拿到React中使用，也可以把ART反轉(zhuǎn)回去。（雖然有很多局限性，后面會講到）
React Native ART 是react-art在React Native中的移植版，接口幾乎完全一致，
React Native中的ART很早之前就已經(jīng)開源了iOS版，最近又在0.18.0中開源了Android版本
因為缺少官方文檔，一直不為人所知。但是通過萬能的Google，搜索到一篇文章，里面詳細(xì)介紹了ART的使用（請參考文章末尾的參考鏈接）。

如何在React Native中使用 ART？

在安卓中使用無需配置任何東西就可使用，在iOS中ART是可選的，你需要手動導(dǎo)入ART.xcodeproj文件，并手動導(dǎo)入libART.a靜態(tài)庫。
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。

波浪實現(xiàn)

接下來就可以盡情使用ART了，我用ART實現(xiàn)了我的充電波浪動畫，效果圖如下：

react-native-art-hcdwave

圖中所有元素均有ART組件實現(xiàn)，代碼我已提交至我的GitHub，歡迎大家參考。

關(guān)于波浪的繪制邏輯與之前的一篇《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繪圖詳解》