剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入交流！

本篇部落格依舊是關於 React Native 的開發內容。今天和大家嘮嘮 React Native 中繪圖機制： ART。

一、配置

在RN中使用ART非常方便，Android已經預設包含ART庫，iOS需要我們單獨新增依賴，配置流程基本可以如下：

1. 開啟 nodule_modules / react-native / Libraries / ART / ART.xcodeproj

2. 將 ART.xcodeproj 檔案拖入iOS專案的Libraries目錄下

3. 在Build Phases下，選擇 Link Binary With Libraries 下的 + 號，選擇 libART.a 依賴。

具體的流程可以參考：iOS配置教程。

在擼碼之前，先來了解下 ART 中常用的基本屬性。

二、屬性介紹

 Surface：渲染畫板，可以理解為Canvas。屬性如下：

     width：渲染區域寬度
     height : 渲染區域高度

 Shape：形狀。屬性如下：

    d：指定形狀繪製路徑   
    stroke : 描邊顏色
    strokeWidth : 描邊寬度
    strokeDash : 定義虛線
    fill : 填充顏色

 Text：文字。屬性如下：

    funt : 字型樣式，定義字型、大小、是否加粗 。 如:  bold 35px Heiti SC

 Path：路徑。方法如下：

    moveTo(x,y) : 移動到座標（x,y）
    lineTo(x,y) : 連線到（x,y）
    arc() : 繪製弧線
    close() : 封閉空間
 

瞭解完基本屬性，來看看每個屬性是如何使用的。

三、示例

在繪製之前，首先匯入需要的屬性。

import {
  ART
} from 'react-native';

const { Surface, Shape, Path, Text, Group } = ART;

示例一 【 直線繪製 】

    render() {

      const linePath = Path().moveTo(1,1).lineTo(300,1);

      return (

        <View style={ styles.container }>
           
            <Surface width={ 300 } height={ 2 } style={{ marginTop: 20 }}>
                <Shape d={ linePath } stroke='#000000' strokeWidth={ 2 } />
            </Surface>

        </View>
      );
    }
 

示例二 【 虛線繪製 】

    render() {

      const linePath = Path().moveTo(1,1).lineTo(300,1);

      return (

        <View style={ styles.container }>
            <Surface width={200} height={2} style={{ marginTop: 20 }}>
                <Shape d={ linePath } stroke='#ff00ff' strokeWidth={2} strokeDash={[10, 15]} />
            </Surface>
        </View>
      );
    }

示例三 【 矩形繪製 】

    render() {

      const reactPath = Path().moveTo(1, 1).lineTo(1, 100).lineTo(100, 100).lineTo(100,1).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 200 } height={ 200 }>
                <Shape d={ reactPath } stroke="#000000" fill="#FF0" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例四 【 三角形繪製 】

    render() {

      const trianglePath = Path().moveTo(1, 1).lineTo(1, 100).lineTo(100, 100).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 200 } height={ 200 } style={{ marginTop: 10 }}>
                <Shape d={ trianglePath } stroke="#000000" fill="#FF00FF" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例五 【 圓形繪製 】

arc(x, y, radius), 終點座標距離起點座標的相對距離

    render() {

      const circlePath = Path().moveTo(50, 1).arc(0, 99, 25).arc(0, -99, 25).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 100 } height={ 100 }>
                <Shape d={ circlePath } stroke="#eeeeee" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例六 【 半圓形繪製 】

    render() {

      const circlePath = Path().moveTo(50,1).arc(0,99,25).close();

      return (

        <View style={ styles.container }>
            <Surface width={ 100 } height={ 100 }>
                <Shape d={ circlePath } stroke="#eeeeee" strokeWidth={1} />
            </Surface>
        </View>
      )
    }

示例七 【 文字繪製 】

    render() {

      const linePath = Path().moveTo(1,1).lineTo(300,1);

      return (

        <View style={ styles.container }>
            <Surface width={100} height={100} style={{ marginTop: 20 }}>
                <Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC">Swipe</Text>
            </Surface>
        </View>
      )
    }

示例八【 圖形疊加繪製 】

    render() {

      const reactPath = Path().moveTo(1, 1).lineTo(1, 100).lineTo(100, 100).lineTo(100,1).close();
      const circlePath = Path().moveTo(50,1).arc(0,99,25).arc(0,-99,25).close();


      return (

        <View style={ styles.container }>
            <Surface width={ 100 } height={ 100 }>
                <Group>
                  <Shape d={reactPath} stroke='#ff00ff' strokeWidth={2}/>
                  <Shape d={circlePath} stroke='#ff00ff' strokeWidth={2} fill='#ff0'/>
                </Group>
            </Surface>
        </View>
      )
    }

四、實戰