1、關於react-native ART庫的使用，目前網上能搜到的少之又少，簡書上的一篇react-native-art 繪圖入門，從基本上講解了一下react-native-art的使用方法，但是隻是簡單的橫豎曲線的繪製，但專案中有一個需求就是繪製網速的速率曲線，

（專案最終效果）

那麼如果按照react-native-art繪圖入門上給的寥寥幾個介面是不可能實現畫出一個平滑曲線的目的的，為此又參考了一篇在React Native中使用 ART，該篇中使用react-native-art-svg庫，其中第一個坑點就是，react-native-art-svg庫需要react-native的版本（具體版本忘記了，好象是2時代的版本0.28吧好像）低於目前專案中所用的版本（專案版本0.35），然後一陣搜尋之後發現，react-native-art-svg目前已經進化成為react-native-svg庫，但要求react-native版本>=0.38（好象是這個值，但反正大於0.35），因此在git上切換分支嘗試用react-native-svg時，發現出現了一些未知的問題，比如scrollView不能往下拖動了，並且暫時沒用精力去升降級RN版本，於是在嘗試了最新版本RN之後，選擇放棄react-native-svg庫。

2、但是如需要畫出上述曲線圖，SVG中的二次貝塞爾曲線是必不可少的，因此不死心，心想，既然ART，是一個在React中繪製向量圖形的JS類庫。這個類庫抽象了一系統的通用介面，統一了SVG，canvas，VML這類向量圖形在React中的書寫格式。那麼，ART庫肯定也是集成了SVG的path屬性，並且支援利用path畫二次貝塞爾曲線，為此，去art庫檔案（在node_modules資料夾下）中查詢ART庫的引用，並且成功發現在react-native-art 繪圖入門中未介紹的path介面（S、C、Q、T有木有）。

3、既能畫二次貝塞爾，並且不用升級RN版本，這簡直是完美符合需求啊。

那麼使用方法就是

1）匯入ART庫

import React from 'react';
import {
    StyleSheet,
    View,
    ART
} from 'react-native';
const {Surface, Shape, Path, Group} = ART;

2）給Path傳入二次貝塞爾曲線控制路徑，並在render中呼叫即可

render() {
    //this.console("render===speedStr:" + this.state.speedStr);

    //const _path = new Path(this.state.speedStr).close();
 
    const _path = new Path('M0 0 Q5 20, 10 20 T15 35, Q17.5 50, 20 50 T25 25, Q27.5 0, 30 0 T35 0, Q37.5 0, 40 0 T45 15, Q47.5 30, 50 30 T55 20, Q57.5 10, 60 10 T65 5, Q67.5 0, 70 0').close();

4、以下為專案程式碼，可以直接引用

speedCanvas.js

/**
 * Created by DELL on 2016/12/13.
 */
'use strict';
import React from 'react';
import {
    StyleSheet,
    View,
    ART
} from 'react-native';
const {Surface, Shape, Path, Group} = ART;

import Dimensions from 'Dimensions';
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const w = ScreenWidth;
const h = Math.ceil(ScreenHeight * 0.2);
const curvature = 2;//二次貝塞爾曲線曲率控制引數
const step = 20;//一次推進10距離單位
const stepNum = Math.floor(w / step);//螢幕寬度可容納幾個速率峰值的顯式

let speedCount = 300;
let speedCountHandle = -1;
const debugMsg = true;
//T只需要一個座標，其控制點已由前面的Q的控制點控制（控制方式為對稱控制，比如Q5 20, 10 20 T15 35，相當於Q5 20, 10 20 T15 20,15 35）
//因此起點座標(0,0)Q終點座標(10,20)與T座標(15,35)組成一條二次平滑貝塞爾曲線，
//（平滑的意思是Q終點座標並不是作為下一條貝塞爾曲線的起點，而是通過T座標使Q終點座標再次延伸一點至T座標，構成貝塞爾曲線的順滑結尾，並以T座標為下一條貝塞爾曲線的起點座標）
//Q終點座標的控制點座標的獲取方案為：取起點座標與Q終點座標的X軸座標的中點為X，取Q終點座標的Y軸座標為Y
//T座標的獲取方案為：取相鄰兩個Q終點座標的X軸座標與Y軸座標的終點座標為X和Y
//例如：const _path = new Path("M0 0 Q5 20, 10 20 T15 35, Q17.5 50, 20 50 T25 25, Q27.5 0, 30 0 T35 0, Q37.5 0, 40 0 T45 15, Q47.5 30, 50 30 T55 20, Q57.5 10, 60 10 T65 5, Q67.5 0, 70 0");
var speedCanvas = React.createClass({
    getDefaultProps(){
        return ({
            speed: 0
        });
    },
    getInitialState(){
        return ({
            speedLevel: 1,//速率檔位 1檔(0-h) 2檔(h-2h) 3檔(2h-3h) 4檔(3h-4h) 5檔(4h-5h)... h一般為100多
            speedStr: ' ',
            speedArr: []//[[10,20,[5,20],[15,35]],[20,50,[17.5,50],[25,25]],[30,0,[27.5,0],[35,0]],[40,0,[37.5,0],[45,15]],[50,30,[47.5,30],[55,20]],[60,10,[57.5,10],[65,5]],[70,0,[67.5,0],[72.5,0]]] 第一個為座標，第二個為速率，第三個為Q控制點座標，第四個為T座標
        })
    },
    componentDidMount(){
    },
    componentWillReceiveProps(props){
        clearTimeout(speedCountHandle);
        speedCountHandle = setTimeout(()=> {
            this.receiveSpeed({speed: props.speed});
        }, speedCount);//此處定時器用於清除頻繁的state狀態改變而導致的頻繁畫線
    },
    receiveSpeed(props){
        this.console("receiveSpeed===currSpeed:" + props.speed);
        //保證最新的速率曲線在陣列的第一位
        let _currLength = this.state.speedArr.length;
        let _speedLevel = 1;
        this.state.speedLevel = 1;//若不重置此值，則speedLevel記錄最高檔，速率曲線圖不會隨著檔位的下降而自動以該檔位的最高速率填滿畫布
        if (_currLength < stepNum) {
            this.state.speedArr.splice(0, 0, [10, props.speed]);
            _currLength = this.state.speedArr.length;
            for (let i = 0; i < _currLength; i++) {
                this.state.speedArr[i][0] = (i + 1) * step;//重置X軸座標為10,20,30...
                _speedLevel = Math.ceil(this.state.speedArr[i][1] / h);
                _speedLevel > this.state.speedLevel ? this.state.speedLevel = _speedLevel : null;
            }
            this.checkSpeedArr();
        }
        else {
            this.state.speedArr.splice(_currLength - 1, 1);//清除陣列最末元素，也即最舊的速率值
            this.state.speedArr.splice(0, 0, [10, props.speed]);//往陣列首元素中插入最新速率值
            _currLength = this.state.speedArr.length;
            for (let i = 0; i < _currLength; i++) {
                this.state.speedArr[i][0] = (i + 1) * step;//重置X軸座標為10,20,30...
                _speedLevel = Math.ceil(this.state.speedArr[i][1] / h);
                _speedLevel > this.state.speedLevel ? this.state.speedLevel = _speedLevel : null;
            }
            this.checkSpeedArr();
        }
    },
    //確定各個速率點以及各速率點的Q、T點
    checkSpeedArr(){
        let _speedArr = this.state.speedArr;
        for (let i = 0, j = _speedArr.length; i < j; i++) {
            if (i > 0) {
                _speedArr[i].length > 2 ? _speedArr[i].splice(2) : null;
                _speedArr[i].push([_speedArr[i - 1][3][0] + (_speedArr[i][0] - _speedArr[i - 1][3][0]) / curvature, _speedArr[i][1]]);//添加當前座標的控制點(Q座標的控制點)
                if (_speedArr[i + 1] !== undefined) {
                    _speedArr[i].push([_speedArr[i][0] + (_speedArr[i + 1][0] - _speedArr[i][0]) / curvature * (curvature - 1), _speedArr[i][1] + (_speedArr[i + 1][1] - _speedArr[i][1]) / 2]);//新增T座標點
                }
                else {
                    _speedArr[i].push([_speedArr[i][0] + (_speedArr[i][0] - _speedArr[i][2][0]), 0]);//新增T座標點，當其為最後一個座標點時候，需要與X軸閉合
                }
            }
            else {
                _speedArr[i].push([_speedArr[i][0] / curvature, _speedArr[i][1]]);//添加當前座標的控制點(Q座標的控制點)
                if (_speedArr[i + 1] !== undefined) {
                    _speedArr[i].push([_speedArr[i][0] + (_speedArr[i + 1][0] - _speedArr[i][0]) / curvature * (curvature - 1), _speedArr[i][1] + (_speedArr[i + 1][1] - _speedArr[i][1]) / 2]);//新增T座標點
                }
                else {
                    _speedArr[i].push([_speedArr[i][0] + (_speedArr[i][0] - _speedArr[i][2][0]), 0]);//新增T座標點，當其為最後一個座標點時候，需要與X軸閉合
                }
            }
        }
        this.checkSpeedStr();
    },
    //右下角座標系的轉換，以右下角為座標系統的對映方式為：(0,0)=>(w,h) (5,10)=>(w-5,h-10)
    checkSpeedStr(){
        this.console("checkSpeedStr===speedLevel:" + this.state.speedLevel);
        let _str = "M" + w + " " + h + " ";
        let _speedArr = [].concat(JSON.parse(JSON.stringify(this.state.speedArr)));//拷貝一下陣列，用於將座標系轉換成右下角座標系
        let _speedLevel = this.state.speedLevel;
        for (let i = 0, j = _speedArr.length; i < j; i++) {
            _str += "Q" + (w - _speedArr[i][2][0]) + " " + (h - _speedArr[i][2][1] / _speedLevel) + ", " + (w - _speedArr[i][0]) + " " + (h - _speedArr[i][1] / _speedLevel);
            if (_speedArr[i][3] !== undefined) {
                _str += " T" + (w - _speedArr[i][3][0]) + " " + (h - _speedArr[i][3][1] / _speedLevel) + ", ";
            }
        }
        this.setState({speedStr: _str});
    },
    render() {
        //this.console("render===speedStr:" + this.state.speedStr);
        const _path = new Path(this.state.speedStr).close();
        return (
            <View style={Styles.canvasWrap}>
                <Surface width={w} height={h}>
                    <Shape d={_path} stroke="#36ffff" strokeWidth={2} fill="rgba(54,255,255,0.2)"/>
                </Surface>
            </View>
        );
    },
    console(msg){
        debugMsg ? console.log("+++speedCanvas===" + msg + "===console end+++") : null;
    }
});

var Styles = StyleSheet.create({
    canvasWrap: {
        width: w,
        height: h,
        borderBottomWidth: 2,
        borderBottomColor: '#36ffff'
    }
});

module.exports = speedCanvas;

1）匯入該speedCanvas.js檔案，注意用大寫字母開頭以用作該js檔案的引用（否則會報引用型別的錯誤，大致好象是，需要一個類，但卻是一個數組物件之類的錯誤），比如

import SpeedCanvas from "./speedCanvas";

2）在render中引入，並傳入速率值作為屬性

<SpeedCanvas speed={this.state.speed} />