React Native Pie Chart 使用教程

最新推荐文章于 2024-09-13 08:18:23 发布

费津钊Bobbie

最新推荐文章于 2024-09-13 08:18:23 发布

阅读量496

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00651/article/details/141766803

版权

React Native Pie Chart 使用教程

react-native-pie-chartSimple pie chart module for your React Native app项目地址:https://gitcode.com/gh_mirrors/re/react-native-pie-chart

1、项目介绍

react-native-pie-chart 是一个用于在 React Native 应用中绘制简单饼图的模块。它支持 iOS 和 Android 平台，并且易于集成到现有的 React Native 项目中。该项目的目的是提供一个轻量级的解决方案，以便开发者能够快速地在他们的应用中添加饼图功能。

2、项目快速启动

安装依赖

首先，确保你的项目中已经安装了 react 和 react-native。然后，安装 react-native-pie-chart 和 @react-native-community/art：

npm install react-native-pie-chart @react-native-community/art --save

如果你的 React Native 版本低于 0.60，还需要手动链接 @react-native-community/art：

react-native link @react-native-community/art

示例代码

以下是一个简单的示例代码，展示了如何在 React Native 应用中使用 react-native-pie-chart：

import React, { Component } from 'react';
import { StyleSheet, ScrollView, Text, View } from 'react-native';
import PieChart from 'react-native-pie-chart';

export default class TestChart extends Component {
  render() {
    const widthAndHeight = 250;
    const series = [123, 321, 123, 789, 537];
    const sliceColor = ['#F44336', '#2196F3', '#FFEB3B', '#4CAF50', '#FF9800'];

    return (
      <ScrollView style={styles.container}>
        <Text style={styles.title}>Basic Pie Chart</Text>
        <PieChart
          widthAndHeight={widthAndHeight}
          series={series}
          sliceColor={sliceColor}
        />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    marginVertical: 20,
  },
});