背景

在移動應用的開發過程中，繪製基本的二維圖形或動畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此採用一種更普遍接受的技術方案，更有利於程式碼的雙平臺相容。

art是一個旨在多瀏覽器相容的Node style CommonJS模組。在它的基礎上，Facebook又開發了react-art ，封裝art，使之可以被react.js所使用，即實現了前端的svg庫。然而，考慮到react.js的JSX語法，已經支援將等等svg標籤直接插入到dom中（當然此時使用的就不是react-art庫了）此外還有HTML canvas的存在，因此，在前端上，react-art並非不可替代。

然而，在移動端，考慮到跨平臺的需求，加之web端的技術積累，react-art成為了現成的繪製圖形的解決方案。react-native分別在0.10.0和0.18.0上添加了iOS和Android平臺上對react-art的支援。

示例程式碼

React.js和React-Native的區別，只在於下文所述的ART獲取上，然後該例子就可以同時應用在Web端和移動端上了。react-art自帶的官方例子：Vector-Widget

Vector-Widget額外實現了旋轉，以及滑鼠點選事件的旋轉加速響應。Web端可以看到點選加速，但是在移動端無效，原因是React Native並未對Group中onMouseDown和onMouseUp屬性作處理。本文著重於靜態svg的實現，暫時無視動畫部分效果即可。

ART

在React Native中ART是個非常重要的庫，它讓非常酷炫的繪圖及動畫變成了可能。需要注意的是，在React Native引入ART過程中，Android預設就包含ART庫，IOS需要單獨新增依賴庫。

ios新增依賴庫

1、使用xcode中開啟React-native中的iOS專案，選中‘Libraries’目錄 ——> 右鍵選擇‘Add Files to 專案名稱’ ——> 'node_modules/react-native/Libraries/ART/ART.xcodeproj' 新增；

2、選中專案根目錄 ——> 點選’Build Phases‘ ——> 點選‘Link Binary With Libraries’ ——> 點選左下方‘+’ ——> 選中‘libART.a’新增。

基礎元件

ART暴露的元件共有7個，本文介紹常用的四個元件：Surface、Group、Shape、Text。

Surface - 一個矩形可渲染的區域，是其他元素的容器
Group - 可容納多個形狀、文字和其他的分組
Shape - 形狀定義，可填充
Text - 文字形狀定義

屬性

Surface

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 React from 'react'
import {
    View,
    ART
} from 'react-native'

export default class Line extends React.Component{

    render(){

        const path = ART.Path();
        path.moveTo(1,1); //將起始點移動到(1,1) 預設(0,0)
        path.lineTo(300,1); //連線到目標點(300,1)

        return(
            <View style={this.props.style}>
                <ART.Surface width={300} height={2}>
                    <ART.Shape d={path} stroke="#000000" strokeWidth={1} />
                </ART.Surface>
            </View>
        )
    }
}

繪製虛線

瞭解strokeDash的引數，
[10,5] : 表示繪10畫素實線在繪5畫素空白，如此迴圈
[10,5,20,5] : 表示繪10畫素實線在繪製5畫素空白在繪20畫素實線及5畫素空白

import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Shape, Path} = ART;

export default class DashLine extends React.Component{

    render(){

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

        return(
            <View style={this.props.style}>
                <Surface width={300} height={2}>
                    <Shape d={path} stroke="#000000" strokeWidth={2} strokeDash={[10,5]}/>
                </Surface>
            </View>
        )
    }
}

繪製矩形

首先通過lineTo繪製三條邊，在使用close連結第四條邊。fill做顏色填充.

import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Shape, Path} = ART;

export default class Rect extends React.Component{

    render(){

        const path = new Path()
            .moveTo(1,1)
            .lineTo(1,99)
            .lineTo(99,99)
            .lineTo(99,1)
            .close();

        return(
            <View style={this.props.style}>
                <Surface width={100} height={100}>
                    <Shape d={path} stroke="#000000" fill="#892265" strokeWidth={1} />
                </Surface>
            </View>
        )
    }
}

繪圓

瞭解arc(x,y,radius)的使用, 終點座標距離起點座標的相對距離。

import React from 'react'
import {
    View,
    ART
} from 'react-native'

const {Surface, Shape, Path} = ART;

export default class Circle extends React.Component{

    render(){

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


        return(
            <View style={this.props.style}>
                <Surface width={100} height={100}>
                    <Shape d={path} stroke="#000000" strokeWidth={1}/>
                </Surface>
            </View>
        )
    }
}

繪製文字

瞭解funt屬性的使用，規則是“粗細字號字型”
注意：字型應該是支援path屬性的，應該是實現bug並沒有不生效。 Android通過修改原始碼是可以解決的，IOS沒看原始碼。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    ART,
    View
} from 'react-native';

const {Surface, Text, Path} = ART;

export default class ArtTextView extends Component {

    render() {

        return (
            <View style={styles.container}>
                <Surface width={100} height={100}>
                    <Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC" path={new Path().moveTo(40,40).lineTo(99,10)} >React</Text>
                </Surface>

            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

});

繪製扇形

在這裡需要使用arc做路徑繪製。
Wedge.js

import React, { Component, PropTypes } from 'react';
import { ART } from 'react-native';
const { Shape, Path } = ART;

/**
 * Wedge is a React component for drawing circles, wedges and arcs. Like other
 * ReactART components, it must be used in a <Surface>.
 */
export default class Wedge extends Component<void, any, any> {

    static propTypes = {
        outerRadius: PropTypes.number.isRequired,
        startAngle: PropTypes.number.isRequired,
        endAngle: PropTypes.number.isRequired,
        originX: PropTypes.number.isRequired,
        originY: PropTypes.number.isRequired,
        innerRadius: PropTypes.number,
    };


    constructor(props : any) {
        super(props);
        (this:any).circleRadians = Math.PI * 2;
        (this:any).radiansPerDegree = Math.PI / 180;
        (this:any)._degreesToRadians = this._degreesToRadians.bind(this);
    }

    /**
     * _degreesToRadians(degrees)
     *
     * Helper function to convert degrees to radians
     *
     * @param {number} degrees
     * @return {number}
     */
    _degreesToRadians(degrees : number) : number {
        if (degrees !== 0 && degrees % 360 === 0) { // 360, 720, etc.
            return (this:any).circleRadians;
        }
        return degrees * (this:any).radiansPerDegree % (this:any).circleRadians;
    }

    /**
     * _createCirclePath(or, ir)
     *
     * Creates the ReactART Path for a complete circle.
     *
     * @param {number} or The outer radius of the circle
     * @param {number} ir The inner radius, greater than zero for a ring
     * @return {object}
     */
    _createCirclePath(or : number, ir : number) : Path {
        const path = new Path();

        path.move(0, or)
            .arc(or * 2, 0, or)
            .arc(-or * 2, 0, or);

        if (ir) {
            path.move(or - ir, 0)
                .counterArc(ir * 2, 0, ir)
                .counterArc(-ir * 2, 0, ir);
        }

        path.close();

        return path;
    }

    /**
     * _createArcPath(sa, ea, ca, or, ir)
     *
     * Creates the ReactART Path for an arc or wedge.
     *
     * @param {number} startAngle The starting degrees relative to 12 o'clock
     * @param {number} endAngle The ending degrees relative to 12 o'clock
     * @param {number} or The outer radius in pixels
     * @param {number} ir The inner radius in pixels, greater than zero for an arc
     * @return {object}
     */
    _createArcPath(originX : number, originY : number, startAngle : number, endAngle : number, or : number, ir : number) : Path {
        const path = new Path();

        // angles in radians
        const sa = this._degreesToRadians(startAngle);
        const ea = this._degreesToRadians(endAngle);

        // central arc angle in radians
        const ca = sa > ea ? (this:any).circleRadians - sa + ea : ea - sa;

        // cached sine and cosine values
        const ss = Math.sin(sa);
        const es = Math.sin(ea);
        const sc = Math.cos(sa);
        const ec = Math.cos(ea);

        // cached differences
        const ds = es - ss;
        const dc = ec - sc;
        const dr = ir - or;

        // if the angle is over pi radians (180 degrees)
        // we will need to let the drawing method know.
        const large = ca > Math.PI;

        // TODO (sema) Please improve theses comments to make the math
        // more understandable.
        //
        // Formula for a point on a circle at a specific angle with a center
        // at (0, 0):
        // x = radius * Math.sin(radians)
        // y = radius * Math.cos(radians)
        //
        // For our starting point, we offset the formula using the outer
        // radius because our origin is at (top, left).
        // In typical web layout fashion, we are drawing in quadrant IV
        // (a.k.a. Southeast) where x is positive and y is negative.
        //
        // The arguments for path.arc and path.counterArc used below are:
        // (endX, endY, radiusX, radiusY, largeAngle)

        path.move(or + or * ss, or - or * sc) // move to starting point
            .arc(or * ds, or * -dc, or, or, large) // outer arc
            .line(dr * es, dr * -ec);   // width of arc or wedge

        if (ir) {
            path.counterArc(ir * -ds, ir * dc, ir, ir, large); // inner arc
        }

        return path;
    }

    render() : any {
        // angles are provided in degrees
        const startAngle = this.props.startAngle;
        const endAngle = this.props.endAngle;
        // if (startAngle - endAngle === 0) {
        //  return null;
        // }

        // radii are provided in pixels
        const innerRadius = this.props.innerRadius || 0;
        const outerRadius = this.props.outerRadius;

        const { originX, originY } = this.props;

        // sorted radii
        const ir = Math.min(innerRadius, outerRadius);
        const or = Math.max(innerRadius, outerRadius);

        let path;
        if (endAngle >= startAngle + 360) {
            path = this._createCirclePath(or, ir);
        } else {
            path = this._createArcPath(originX, originY, startAngle, endAngle, or, ir);
        }

        return <Shape {...this.props} d={path} />;
    }
}

示例程式碼：

import React from 'react'
import {
    View,
    ART
} from  'react-native'

const {Surface} = ART;
import Wedge from './Wedge'

export default class Fan extends  React.Component{

    render(){

        return(
            <View style={this.props.style}>
                <Surface width={100} height={100}>
                    <Wedge
                     outerRadius={50}
                     startAngle={0}
                     endAngle={60}
                     originX={50}
                     originY={50}
                     fill="blue"/>

                </Surface>
            </View>
        )
    }
}

綜合示例

相關程式碼：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {
    Component
}from 'react';
import {
    ART as Art,
    StyleSheet,
    View,
    Dimensions,
    TouchableWithoutFeedback,
    Animated
} from 'react-native';

var HEART_SVG = "M130.4-0.8c25.4 0 46 20.6 46 46.1 0 13.1-5.5 24.9-14.2 33.3L88 153.6 12.5 77.3c-7.9-8.3-12.8-19.6-12.8-31.9 0-25.5 20.6-46.1 46-46.2 19.1 0 35.5 11.7 42.4 28.4C94.9 11 111.3-0.8 130.4-0.8"
var HEART_COLOR = 'rgb(226,38,77,1)';
var GRAY_HEART_COLOR = "rgb(204,204,204,1)";

var FILL_COLORS = [
    'rgba(221,70,136,1)',
    'rgba(212,106,191,1)',
    'rgba(204,142,245,1)',
    'rgba(204,142,245,1)',
    'rgba(204,142,245,1)',
    'rgba(0,0,0,0)'
];

var PARTICLE_COLORS = [
    'rgb(158, 202, 250)',
    'rgb(161, 235, 206)',
    'rgb(208, 148, 246)',
    'rgb(244, 141, 166)',
    'rgb(234, 171, 104)',
    'rgb(170, 163, 186)'
]

getXYParticle = (total, i, radius) => {
    var angle = ( (2 * Math.PI) / total ) * i;

    var x = Math.round((radius * 2) * Math.cos(angle - (Math.PI / 2)));
    var y = Math.round((radius * 2) * Math.sin(angle - (Math.PI / 2)));
    return {
        x: x,
        y: y,
    }
}

getRandomInt = (min, max) => {
    return Math.floor(Math.random() * (max - min)) + min;
}

shuffleArray = (array) => {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}


var {
    Surface,
    Group,
    Shape,
    Path
} = Art;

//使用Animated.createAnimatedComponent對其他元件建立對話
//建立一個灰色的新型圖片
var AnimatedShape = Animated.createAnimatedComponent(Shape);

var {
    width: deviceWidth,
    height: deviceHeight
} = Dimensions.get('window');

export default  class ArtAnimView extends Component {
    constructor(props) {
        super(props);

        this.state = {
            animation: new Animated.Value(0)
        };
    }

    explode = () => {
        Animated.timing(this.state.animation, {
            duration: 1500,
            toValue: 28
        }).start(() => {
            this.state.animation.setValue(0);
            this.forceUpdate();
        });
    }

    getSmallExplosions = (radius, offset) => {
        return [0, 1, 2, 3, 4, 5, 6].map((v, i, t) => {

            var scaleOut = this.state.animation.interpolate({
                inputRange: [0, 5.99, 6, 13.99, 14, 21],
                outputRange: [0, 0, 1, 1, 1, 0],
                extrapolate: 'clamp'
            });

            var moveUp = this.state.animation.interpolate({
                inputRange: [0, 5.99, 14],
                outputRange: [0, 0, -15],
                extrapolate: 'clamp'
            });

            var moveDown = this.state.animation.interpolate({
                inputRange: [0, 5.99, 14],
                outputRange: [0, 0, 15],
                extrapolate: 'clamp'
            });

            var color_top_particle = this.state.animation.interpolate({
                inputRange: [6, 8, 10, 12, 17, 21],
                outputRange: shuffleArray(PARTICLE_COLORS)
            })

            var color_bottom_particle = this.state.animation.interpolate({
                inputRange: [6, 8, 10, 12, 17, 21],
                outputRange: shuffleArray(PARTICLE_COLORS)
            })

            var position = getXYParticle(7, i, radius)

            return (
                <Group
                    x={position.x + offset.x }
                    y={position.y + offset.y}
                    rotation={getRandomInt(0,  
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    react-native之ART繪圖詳解
      
                
原文地址


背景


在移動應用的開發過程中，繪製基本的二維圖形或動畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此採用一種更普遍接受的技術方案，更有利於程式碼的雙平臺相容。

art是一個旨在多瀏覽器相容的Node style Commo 

  
 

    

    
    React Native之Redux使用詳解之Reducers（30）
      
							
							
							React Native之Redux使用詳解之Reducers



一. Reducers

Actions 描述發生了什麼，但不能指定響應中state怎麼變化，這是Reducers的工作。



1. 設計State Shape

在Redux中，所有sta 

  
 

    

    
    React Native的props使用詳解
      static   rip   ng-   ont   nts   -m   https   oot   ner   普通傳參

傳遞
export default class App extends Component<> {

    constructor() {
        super( 

  
 

    

    
    React Native的state使用詳解
      red   什麽   style   data   return   javascrip   ets   pre   fault   什麽是State

props是不可改變，只讀的。為了實現交互，就需要用到組件的state。我們將組件看為狀態機，UI是各種各樣的狀態，並在各種各樣的狀態之間可以切換，只需要改 

  
 

    

    
    react-redux 之 connect 方法詳解
      Redux 是「React 全家桶」中極為重要的一員，它試圖為 React 應用提供「可預測化的狀態管理」機制。Redux 本身足夠簡單，除了 React，它還能夠支援其他介面框架。所以如果要將 Redux 和 React 結合起來使用，就還需要一些額外的工具，其中最重要的莫過於 react-redux 了。 

  
 

    

    
    react-native-scrollable-tab-view詳解
      
                
原文連結


在React Native開發中，官方為我們提供的Tab控制器有兩種：TabBarIOS和ViewPagerAndroid。TabBarIOS，僅適用於IOS平臺
ViewPagerAndroid，僅適用於Android平臺（嚴格來講並不算，因為我們還需要自己 

  
 

    

    
    React Native和Android整合詳解
      
							
							
							前言

按照React Native的迭代速度，使用官網的文件，已經不能很順利的實現React Native和Android的有效整合。React Native最新版本 已經是0.39。為了更好的講解React Native和Android的整合我這裡列出我本地 

  
 

    

    
    react-native 呼叫原生模組詳解
      
                

一，繼承 ReactContextBaseJavaModule 實現如下方法  自定義方法用 @ReactMethod註釋
/**
            * 日誌列印module
    * Created by ybj on 2016/2/26.
         

  
 

    

    
    react-native-router-flux 使用詳解（三）
      
                



我們主要進一步介紹了react-native-router-flux的使用，接下來主要講解 其主要配置引數和api，當前我主要是翻譯官網的學習資料進行學習，我將在後面的章節中實際使用他，通關編寫一個rn版的微博app http://www.cherylgood.cn
 

  
 

    

    
    react native TextInput各個引數詳解，內含事例動圖
      
                
TextInput 文字輸入框
React Native中的文字輸入框使用和iOS比較相近，可能是因為 RN 首先封裝iOS端的緣故（這點對iOS開發者來說是個好訊息）
TextInput也是繼承自 View,所以 View 的屬性 TextInput 也能使用，一些樣式類 

  
 

    

    
    (十二)React-Native－生命週期詳解
      
                

一.React-Native生命週期
說到生命週期，大家大概也能想到就是建立、銷燬、狀態改變。RN的元件就是一個狀態機。它接收兩個輸入引數：props和state，返回一個Virtual DOM。和Native一樣，RN也為我們提供相應的鉤子函式。RN的狀態變化取決於pr 

  
 

    

    
    React Native之this詳解
      過程   show   super   try   this   registry   alert   item   rop   this引起的錯誤詳解
       我們在學習React Native的過程中，肯定經常遇見過undefined is not an object這樣的問題吧，尤其是剛開始學習的 

  
 

    

    
    React Native之屬性類型檢查機制詳解 PropType 變成 prop-types
      word   man   div   color   object   platform   UC   靜態   ESS   屬性確認的作用
使用 React Native 創建的組件是可以復用的，所以我們開發的組件可能會給項目組其他同事使用。但別人可能對這個組件不熟悉，常常會忘記使用某些屬性，或者某些屬性傳 

  
 

    

    
    React Native系列之flexbox佈局詳解
      
                

CSS3為我們提供了一種可伸縮的靈活的web頁面佈局方式-flexbox佈局，它具有很強大的功能，可以很輕鬆實現很多複雜佈局，在它出現之前，我們經常使用的佈局方式是浮動或者固定寬度+百分比來進行佈局，程式碼量較大且難以理解。

為了更好理解flexbox佈局，這裡首先要介 

  
 

    

    
    【React Native開發】React Native控制元件之RefreshControl元件詳解(21)
      轉載請標明出處：(一)前言         【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org        今天我們一起來看一下RefreshControl下拉重新整理元件講解以及使用例項剛建立的React Native技術交 

  
 

    

    
    React Native之ScrollView控制元件詳解
      
							
							
							概述

ScrollView在Android和ios原生開發中都比較常見，是一個 滾動檢視控制元件。在RN開發中，系統也給我們提供了這麼一個控制元件。不過在RN開發中 ，使用ScrollView必須有一個確定的高度才能正常工作，因為它實際上所做的就是將一系列不確 

  
 

    

    
    前端框架學習總結之Angular、React與Vue的比較詳解
      
                
近幾年前端的技術發展很快，細分下來，主要可以分成四個方面：
1.開發語言技術，主要是ES6&7，coffeescript，typescript等； 
2.開發框架，如Angular，React,Vue.js，Angular2等； 
3.開發工具的豐富和前端工程化，像 

  
 

    

    
    linux 之awk命令詳解
      數學函數   mat   loop   多次   finished   數組結構   save   pre   新的   awk是一種程序語言，對文檔資料的處理具有很強的功能。awk名稱是由它三個最初設計者的姓氏的第一個字母而命名的： Alfred V. Aho、Peter J. We i n b e rg  

  
 

    

    
    運維自動化之Saltstack使用詳解
      自動化運維   saltstack   概要saltstack是基於Python開發的C/S架構的一款批量管理工具，底層采用動態的連接總線（ZeroMQ消息隊列pub/sub方式通信），使用ssl證書簽發的方式進行認證管理，使其可以用於編配, 遠程執行, 配置管理等等。部署輕松，在幾分鐘內可運行起來，擴展性好 

  
 

    

    
    Spark-Sql之DataFrame實戰詳解
      集合   case   編程方式   優化   所表   register   操作數   print   ava   1、DataFrame簡介：
在Spark中，DataFrame是一種以RDD為基礎的分布式數據據集，類似於傳統數據庫聽二維表格，DataFrame帶有Schema元信息，即DataFram