react-native-f2
antv-f2的react-native实现
使用此插件,请先安装GCanvas 该插件的Android版有很多坑,可以看下示例
文档:
文档请看官方的docs
使用示例:
安装:
一、
yarn add react-native-f2
yarn add -D babel-preset-env babel-plugin-transform-remove-strict-mode
或
npm i -S react-native-f2
npm i -D babel-preset-env babel-plugin-transform-remove-strict-mode
二、添加如下代码到.babelrc
{
...
"plugins": [
"transform-remove-strict-mode",
...
]
}
实例:
;;;; const width = Dimensionswidth;const height = width - 100; { // 延迟渲染(这里是由于GCanvas加载有延迟导致,如果不是界面渲染完立即加载,可不用延迟) ; } { const data = year: '1951' sales: 38 year: '1952' sales: 52 year: '1956' sales: 61 year: '1957' sales: 145 year: '1958' sales: 48 year: '1959' sales: 38 year: '1960' sales: 38 year: '1962' sales: 38 ; // 宽高必须指定(这里是指定F2的) const chart = el: this$canvascanvas width height ; chartsourcedata; chart; chart; } { // 这里宽高同上,必须指定且值必须相同(这里指定GCanvas的) <F2Canvas ref= this$canvas = e style= width height /> }