本文探讨了 Web 图表 Native 化的可行性与 React SVG 图表 Native 化的具体操作过程，文中涉及的改造项目目前并不成熟，仅供参考。

引子

图表，作为数据可视化表达具有很重要的作用。在 React Native 中，官方提供的绘图方案只有 ART 组件，而 ART 组件类似于 Web 中的阉割版的 SVG ，只是一个基础绘图组件，并不是一个成熟的图表解决方案。而对于复杂图表的技术选型，主要有两个常见方案可以选择：WebView 与 原生端组件 。

• WebView

这种方案是使用 Web 图表库，将图表功能用网页实现 ，然后在 React Native 中利用 WebView 将网页展示出来。这种做法非常简单，稍微封装一下 WebView 组件，就能直接使用 Web 现有的成熟的图表如：Echarts，highCharts 来实现功能。

• 原生端组件

这种方案分两种情况，其中：

一种是绘制逻辑由 React Native 端负责：Android 与 IOS 成熟的图表组件也很多，也可以将这些成熟的图表组件封装给 React Native 使用，由 React Native 端实现绘制逻辑。这种做法性能比 WebView 方式性能好，但是 React Native 生态中有两端都封装好的成熟的方案较少。

另一种绘制逻辑完全由原生端负责：Android 与 IOS 端分别实现图表功能，React Native 端直接展示。这种方式性能最好，但是要写两套代码成本也很高。

在实际项目当中，笔者也是用了 react-native-echarts 这种采用 WebView 的图表解决方案，对笔者而言，这应该是目前最为简便的方案。可是，除了使用 WebView ，还有没有别的方式能利用这些成熟的 Web 图表库呢？或者，如果要将 Web 图表库复刻到 React Native 有没有什么别的可行的方案？

为了解答这些疑问，笔者将在下文详细介绍 Web 图表 Native 化的可行性 与 React SVG 图表 Native 化 的具体操作过程。

Web 图表 Native 化的可行性

在网页上进行绘图有两种方式：Canvas 与 SVG。使用 Canvas 来绘图是利用命令式方式调用 CanvasRenderingContext2D API。使用 SVG 来绘图是在 DOM 节点里使用相关标签如：svg，path，line 等声明式方式来绘制图形。

如果能在 React Native 中使用 Canvas 或者 SVG，那么复刻 Web 图表技术就是可行的。

从 Canvas 角度看可行性

React Native 需要 Canvas 组件并且需要能提供 CanvasRenderingContext2D API。然而，社区并没有原生端支持的 Canvas 组件，虽然有一个 react-native-canvas 但是也是基于 WebView 的。此外，阿里开源的 GCanvas 项目想做跨平台的渲染引擎，但是目前提供的 Canvas API 也还不全，不够成熟。所以，目前，对于利用 Canvas 实现的 Web 图表库，还没有能用的方案。

从 SVG 角度看可行性

SVG 绘图是声明式的，这点与 React 组件的特点是一样的。恰好官方也提供了 ART 组件，社区也有 react-native-svg 这种组件，所以，将用 React + SVG 来实现的 Web 图表组件转换到 React Native 端应该是非常可行。

其实，React 生态里有一个 Web 图表库 victory，并且也有基于 react-native-svg 的 React Native 端的支持 victory-native 。但是 victory 在使用上比较难，文档示例较少且没有复杂示例，而 victory-native 也有不少因为 react-native-svg 的 bug 导致的问题，这也可能是 stars 数不多，不太流行的原因。

有了 victory-naitve 作为成功示例，笔者觉得 React SVG 图表 Native 化成功率更高了。那么，具体要怎么做？

React SVG 图表 Native 化

整个 Native 化的目标非常简单，只要让在 Web 端功能正常的图表能在 React Native 端展示出来就行了。

虽然 react-native-svg 提供的组件 比 ART 组件更接近 SVG， 但是鉴于 react-native-svg 还有很多 issue 还没解决，而且也不是官方组件，所以笔者选用了 ART 。接着需要选择一个合适的 React Web 基于 SVG 的图表库来进行 Native 化。

笔者调研了两个项目：recharts 与 react-charts ，其中：
recharts：star 数较多，比较流行，实现和架构大体同 victory，但没有 native 支持，项目结构稍复杂。
react-charts：star 数很少，但是基本类型图表都有，文档实例也完善，项目稍简单。

笔者认为先从简单的项目入手比较容易，因此就选择 react-charts 这个项目来进行实验。整个实验性项目处理了相关的兼容性问题，主要涉及到 底层组件转换，css 转换 ，Dom API 替换等。下图是改动总览：

以下详细介绍这几个填坑要点：

底层组件转换

哪些组件需要转换？对于一些抽象的高层组件如 LineChart 等折线图组件是无需做转换的，而底层组件如 HTML 标签如：svg ，这些标签组件就需要做转换，因为 React Native 里面没有，平台不兼容性。转换工作主要是需要将 Web 里面的 HTML 标签，尤其是 SVG 标签转换到 React Native 对应的组件。

• SVG 标签的转换

笔者选用 React Native 里的 ART 组件对于 Web 的 SVG 标签，来做对应的组件替换。

react-charts 里面用到的 SVG 标签有： svg，g，circle，line，rect，path，text。而在 ART 里，只有 Surface，Group，Shape，Text 等组件。

svg 可以对应到 Surface，g 对应到 Group， text 对应到 Text ，其他的 circle，line，rect，path 都要用 Shape 通过创建 path 路径来绘制相应的组件：Circle，Line，Rect，Path 。比如，依据 SVG 的 line 标签的使用方法，可以通过 ART 的 Shape 组件来创建与之对应的 Line 组件。

line.js 的源码如下：

// @flow
import React from "react";
import { ART } from "react-native";

const { Path, Shape } = ART;
// ...

export default class Line extends React.Component {
  render() {
    const { x1 = 0, x2 = 0, y1 = 0, y2 = 0, ...rest } = this.props;
    const path = new Path()
      .moveTo(x1, y1)
      .lineTo(x2, y2)
      .close();
      
     // ...
     
    return (
      <Shape {...rest}  d={path} />
    );
  }
}

所以，这些 SVG 标签组件大致都能得到对应的 ART 替换组件。

• 其他 HTML 标签的转换

除了 SVG 标签，react-charts 里面还有用到一些 HTML 标签，如 div，table，tbody，tr，td，strong，span 等标签，这些标签可以用 React Native 里简单的 View，Text 标签来作替换。

html.js 源码如下：

// @flow
import React from "react";
import { View as RawView, Text as RawText } from "react-native";
import transCssStyle from "../utils/transCssStyle";

class View extends React.Component {
  render() {
    const { style, ...rest } = this.props;

    return <RawView {...rest} {...transCssStyle(style)} />;
  }
}

class Text extends React.Component {
  render() {
    const { style, ...rest } = this.props;

    return <RawText {...rest} {...transCssStyle(style)} />;
  }
}

export default {
  Div: View,
  Table: View,
  Tbody: View,
  Tr: View,
  Td: View,
  Strong: Text,
  Span: Text
};

css 转换

Web css 样式也是不能直接在 React Native 里面用的，因此也需要转换。关于 css 转换到 React Native 社区已有比较成熟的方案了，就是：css-to-react-native。好在 react-charts 很多都是用内联样式，如果是用 className + 单独的 css 样式文件的话，处理起来会更麻烦。简单已有成熟方案，但是在实际操作中还是出现了一些问题，主要问题是在对 transform 的处理上。

css-to-react-native 对 trasform 的支持性不好，而且对于 ART 组件，不能直接在 style prop 中用 transform，而是有个单独的 transform prop 与单独的 Tranform 接口来做 tranform 。因此对于 ART 组件，需要应用 ART 的 Tranform 接口生成的 transform。

transTransform.js 的源码如下：

// @flow
import { ART } from "react-native";

const { Transform } = ART;

export default function transTransform(transforms?: Array<number>) {
  if (!transforms) {
    return undefined;
  }

  const transformStyle = transforms.reduce((acc, transform) => {
    if (transform.rotate !== undefined) {
      transform.rotate = transform.rotate.replace(
        /(\d+)deg/g,
        ($input, $1) => $1
      );
    }
    return Object.assign(acc, transform);
  }, {});
  const { translateX, translateY, scaleX, scaleY, rotate } = transformStyle;
  const transform = new Transform();

  if (translateX !== undefined || translateY !== undefined) {
    transform.move(translateX || 0, translateY || 0);
  }

  if (rotate !== undefined) {
    transform.rotate(rotate || 0);
  }

  if (scaleX !== undefined || scaleY !== undefined) {
    transform.scale(scaleX || 1, scaleY || 1);
  }

  return transform;
}

将上文的 ART Line 组件应用到 style 的转换：

// ...
const resolvedStyle = {
 ...defaultStyle,
 ...transCssStyle(style)
};
const transform = transTransform(resolvedStyle.transform);
const path = new Path()
 .moveTo(x1, y1)
 .lineTo(x2, y2)
 .close();

return (
 <Shape {...rest} {...resolvedStyle} d={path} transform={transform} />
);

Dom API 替换

对于 react-charts 的 Dom API 的替换主要涉及到有 getBoundingClientRect 与点击事件的处理。

• getBoundingClientRect

在 React Native 中可以用 UIManager 来提供类似的接口，但是在使用上需要进行调整：

由 react-charts 的 el.getBoundingClientRect() 到 React Native 平台上的 getBoundingClientRect(el)。

getBoundingClientRect.js 源码如下：

import { findNodeHandle, UIManager } from "react-native";

function transformBoundingClientRect(x, y, width, height, pageX, pageY) {
  return {
    left: pageX,
    top: pageY,
    right: pageX + width,
    bottom: pageY + height,
    width,
    height,
    offsetLeft: x,
    offsetTop: y
  };
}

export async function getBoundingClientRect(ref) {
  return new Promise(resolve => {
    UIManager.measure(findNodeHandle(ref), (...args) => {
      resolve(transformBoundingClientRect(...args));
    });
  });
}

• 点击事件

React Native 处理点击事件需要用 PanResponder 来处理，因此涉及点击事件处理的部分也需要有所调整。

react-charts 里的写法：

<Svg onTouchStart={this.this.onTouchStart} {...otherProps}/>

需要改为：

panHandlers = createPanResponder({
  start: this.onTouchStart,
  move: this.onTouchMove, 
  end: this.onTouchEnd
});

<Svg {...panHandlers} {...otherProps}/>
  

createPanResponder.js 源码如下：

// @flow
import { PanResponder } from "react-native";

type ResponderFunction = (evt: Object, gestureState: Object) => void;

export default function createPanResponder({
  start,
  move,
  end,
  cancel
}: {
  start?: ResponderFunction,
  move?: ResponderFunction,
  end?: ResponderFunction,
  cancel?: ResponderFunction
}) {
  return PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

    onPanResponderGrant: (evt, gestureState) => {
      // start
      start && start(evt, gestureState);
    },
    onPanResponderMove: (evt, gestureState) => {
      // move
      move && move(evt, gestureState);
    },
    onPanResponderTerminationRequest: (evt, gestureState) => true,
    onPanResponderRelease: (evt, gestureState) => {
      // end
      end && end(evt, gestureState);
    },
    onPanResponderTerminate: (evt, gestureState) => {
      // cancel
      cancel && cancel(evt, gestureState);
    },
    onShouldBlockNativeResponder: (evt, gestureState) => {
      return true;
    }
  }).panHandlers;
}

成果

经过这一番折腾，笔者最终达成了基本目标。这个改造项目可以在： react-charts-native 进行查看 ，读者可以查看 commit 记录了解具体的改动过程。以下是成果截图：

总结

对笔者而言，本文的这番探索非常有意义。Web 图表库如果能复刻到 React Native 平台，React Native 图表技术选型将会有更多的选择。此外，在有了相对统一的图表框架的基础上，React Native 图表 Web 化也将非常方便。

不过，目前笔者对 react-charts Native 化的进展只是停留在实验性的阶段，距离完全复刻 Web 上的成熟型功能还有一段距离。该项目也还有几个部分需要完善的地方：

• 坐标的精细化

标记过长时展示会有重叠，这点不够完善。

• 点击交互 (点击事件定位)处理

react-charts 的点击事件处理，不是将事件监听在 svg 元素上而是监听在 svg 里面的 path 等元素，而 ART 组件中除了 Surface 能监听点击事件，其他的 Group，Shape 组件都不行。所以，目前根据手势动态展示图例等功能还不能很好地支持。

• 支持动画

react-charts 的动画依赖 react-show ，react-show 使用了 css3 transition 动画，这部分改造还没有做，所以没有支持。后期可以动态构造 path d 并结合 Animated 组件来实现动画。

以上部分涉及到具体的绘制逻辑，改动较大，需要在对 react-charts 核心代码有进一步的理解，才能很好地进行改造。笔者之后如有精力，将会持续完善。