Recent refactoring of the project used React Native to rewrite the original wave animation before restoring it. I didn’t know React Native had the ART library. I planned to use canvas in H5 to realize wave animation, but I didn’t get it out for a long time. Later, I went back to Google how React Native implemented animation effects and found several good articles on how to use the React Native ART library.

Today, I just used React Native to restore the wave animation in the previous project, so I sort out my implementation ideas while the iron is hot and share my mental process with you.

React Native ART what exactly is React Native ART?

ART is a javascript library that draws vector graphics in React. This library abstracts the general interface of the system, unifying the writing format of vector graphics such as SVG, Canvas and VML in React. You can use SVG, Canvas, and VML vector graphics in React using ART, or reverse ART. React Native ART is a port of React Native ART. The interface of React Native ART is almost identical. React Native ART has been open source for iOS for a long time. The Android version was recently open-source in 0.18.0 and has been unknown due to the lack of official documentation. But through the almighty Google search, I found an article detailing the use of ART (see the reference link at the end of this article).

How to use ART in React Native?

On Android, you don’t need to configure anything to use ART. On iOS, ART is optional. You need to manually import the art. xcodeproj file and import the libART. How to configure ART in iOS projects is as follows:

  1. Right-click the project in Xcode ->Add Files toYour Project Name-> Select AddProject path/ node_modules/react – native/Libraries/ART/ART. Xcodeproj.
  2. Click the + sign in the Link Binary With Libraries section of Build Phases and select AddlibART.a.

The waves to achieve

Then you can use ART as much as you like. I realized my charging wave animation with ART, and the effect picture is as follows:




react-native-art-hcdwave

All elements in the figure have ART component implementation. I have submitted the code to my GitHub for your reference.

The logic of wave drawing is the same as the previous article CGContextRef drawing -iOS Spherical wave loading Progress control -HcdProcessView details.

How to use

Install react-Native – art-hCDWave into your project using the following code.

npm i react-native-art-hcdwave
Copy the code

If you need to use it again, you can use it in the following way.

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',
  }
});
Copy the code

Refer to the article

Use ART in React Native