react-native-charts-wrapper使用

安装

react-native-charts-wrapper

yarn add @babel/runtime --dev

0.60之上，无需手动连接，但是需要在ios上创建创建swift桥(因为它的源码是swift)：
拖拽一个swift文件进工程xcode 就会提示创建：

image.png
image.png

android端很顺利，之后在项目中的应用源码：

import moment from 'moment';
import React, {useMemo} from 'react';
import {processColor, StyleSheet} from 'react-native';
import {
  LineChart,
  LineDataset,
  LineDatasetConfig,
} from 'react-native-charts-wrapper';
import {testData} from '../../mocks/data';

interface IUnitProps {
  uom: string;
}
export interface IDataItemProps {
  createdAt: string;
  date: string;
  type: string;
  unit: IUnitProps;
  value: number;
}

export default function LineGraph(): React.ReactElement {
  const dates: string[] = useMemo(
    () =>
      testData.map((item: IDataItemProps) => {
        let date = moment(item.date)
          .format('MMM Do')
          .replace('nd', '')
          .replace('th', '');
        return date;
      }),
    [],
  );
  const config: LineDatasetConfig = useMemo(
    () => ({
      drawCircles: true,
      circleColor: processColor('#EC6F22'),
      circleHoleColor: processColor('#EC6F22'),
      circleRadius: 5,
      lineWidth: 2,
      color: processColor('#8EC5CA'),
      drawValues: false,
      //   visible: false,
      //   drawFilled: true,
    }),
    [],
  );
  let values: any[] = useMemo(
    () =>
      testData.reverse().map((item: IDataItemProps) => ({
        y: item.value,
        marker: 'sdfsdf',
      })),
    [],
  );
  let dataSets: LineDataset[] = useMemo(
    () => [{values, config, label: ''}],
    [config, values],
  );
  return (
    <LineChart
      style={styles.chart}
      scaleEnabled={true}
      scaleXEnabled={true}
      scaleYEnabled={true}
      highlightPerTapEnabled={true}
      highlightPerDragEnabled={false}
      pinchZoom={true}
      doubleTapToZoomEnabled={false}
      onSelect={event => {
        let entry = event.nativeEvent;
        if (entry != null) {
          alert(JSON.stringify(entry));
        }

        console.log('====================================');
        console.log(entry);
        console.log('====================================');
      }}
      onChange={event => console.log(event.nativeEvent)}
      legend={{
        enabled: false,
      }}
      animation={{
        durationX: 0,
        durationY: 600,
        easingY: 'EaseInOutQuart',
      }}
      xAxis={{
        enabled: true,
        position: 'BOTTOM',
        drawLabels: true,
        valueFormatter: dates,
        granularityEnabled: true,
        granularity: 1,
      }}
      yAxis={{
        left: {
          enabled: false,
        },
        right: {
          enabled: true,
        },
      }}
      data={{
        dataSets,
      }}
    />
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  chart: {
    flex: 1,
  },
});

解释：

legend={{
        enabled: false,
      }}

是左下角的小四方框，false 就是隐藏掉这个

image.png

onSelect={event => {
        let entry = event.nativeEvent;
        if (entry != null) {
          alert(JSON.stringify(entry));
        }

        console.log('====================================');
        console.log(entry);
        console.log('====================================');
      }}

点击事件：

image.png

 yAxis={{
        left: {
          enabled: false,
        },
        right: {
          enabled: true,
        },
      }}

默认是左右两边都显示y的

image.png

这段代码是配置小圆圈以及线条的样式：

 const config: LineDatasetConfig = useMemo(
    () => ({
      drawCircles: true,
      circleColor: processColor('#EC6F22'),
      circleHoleColor: processColor('#EC6F22'),
      circleRadius: 5,
      lineWidth: 2,
      color: processColor('#8EC5CA'),
      drawValues: false,
      //   visible: false,
      //   drawFilled: true,
    }),
    [],
  );

默认样式是这样的：

image.png
最终demo地址：https://github.com/zhuchuanwu/SamFisher