React Native：为 React Native 应用程序创建图表和图形视图

【问题标题】：React Native: Create Diagram and Graph view for React Native appReact Native：为 React Native 应用程序创建图表和图形视图
【发布时间】：2021-06-26 02:17:58
【问题描述】：

我有一个项目需要在移动应用上创建图表视图。我研究了一些库，但仍然找不到任何解决方案。任何人都知道一些在 react native 上运行的好库吗？请帮忙告诉我，提前谢谢！

【问题讨论】：

图表和图表是模棱两可的术语。您在寻找条形图还是节点边图？
react-native 的图形支持很差，尤其是交互式图形。这是由于平台抽象和缺少低级图形层。因此，很难找到任何非静态的东西。
嗨@Sebastian，感谢您的帮助。我正在寻找节点边缘图。你知道有没有可以创建像 JointJS 这样的图表的 react native 库

标签： react-native mobile diagram

【解决方案1】：

我找到了这个库

https://www.npmjs.com/package/react-native-svg-charts

首先，安装这个库

npm i react-native-svg-charts
npm i react-native-svg

第二

cd ios
pod install

像这样创建新屏幕，

import React from 'react';
import {BarChart, XAxis} from 'react-native-svg-charts';
import {View} from 'react-native';
import * as scale from 'd3-scale';

class App extends React.PureComponent {
  render() {
    const data = [14, 80, 100, 55];

    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <View
          style={{
            height: 200,
            width: '80%',
          }}>
          <BarChart
            style={{flex: 1}}
            data={data}
            gridMin={0}
            svg={{fill: 'rgb(134, 65, 244)'}}
          />
          <XAxis
            style={{marginTop: 10}}
            data={data}
            scale={scale.scaleBand}
            formatLabel={(value, index) => index}
            labelStyle={{color: 'black'}}
          />
        </View>
      </View>
    );
  }
}

export default App;

【讨论】：