React Native Expo 36.0.0中react-native-pie报ARTShape未找到错误求助

Hey there! Let's get that pie chart working for you. That error pops up because react-native-pie relies on React Native's native ART library, which isn't set up the same way in Expo—Expo wraps ART into the expo-art package instead. Here's how to fix it, step by step:

Option 1: Patch react-native-pie to work with Expo #

1. Install expo-art first #

Run this in your project root to add the Expo-compatible ART package:

expo install expo-art

2. Update the ART import in react-native-pie #

The react-native-pie package looks for ART in react-native by default, but we need to point it to expo-art. Open node_modules/react-native-pie/Pie.js and change:

import { ART } from 'react-native';

to:

import * as ART from 'expo-art';

⚠️ Quick note: This change will get overwritten if you run npm install or yarn install later. For a permanent fix, skip to Option 2.

Option 2: Build a custom pie chart with expo-art (no external dependencies) #

If you don't want to mess with node_modules, you can make a simple pie chart component yourself using expo-art directly. Create a new file PieChart.js in your project:

import React from 'react';
import { View } from 'react-native';
import { ART } from 'expo-art';
const { Surface, Shape, Path } = ART;

const PieChart = ({ radius, sections }) => {
  const totalPercentage = sections.reduce((sum, section) => sum + section.percentage, 0);
  let currentAngle = -Math.PI / 2; // Start drawing from the top of the circle

  return (
    <Surface width={radius * 2} height={radius * 2}>
      {sections.map((section, index) => {
        const sliceAngle = (section.percentage / totalPercentage) * 2 * Math.PI;
        const endAngle = currentAngle + sliceAngle;

        // Draw the slice path
        const slicePath = new Path()
          .moveTo(radius, radius)
          .arc(radius, radius, radius, currentAngle, endAngle)
          .close();

        currentAngle = endAngle;

        return <Shape d={slicePath} fill={section.color} key={index} />;
      })}
    </Surface>
  );
};

export default PieChart;

Then update your HomeScreen to use this component instead:

// Replace import Pie from 'react-native-pie'; with:
import PieChart from './PieChart'; // Adjust the path if you saved it elsewhere

// In your render method:
<PieChart radius={80} sections={[
  { percentage:10, color:'red' },
  { percentage:30, color:'green' },
  { percentage:60, color:'orange' }
]} />

Final Step: Restart Expo with cache cleared #

Run this command to make sure all changes take effect:

expo start -c

Pro Tip for New React Native/Expo Devs #

Since you're just starting out, consider using Expo-compatible chart libraries that don't require native module tweaks:

• victory-native: Fully supported by Expo, has tons of chart types and customization options
• react-native-chart-kit: Uses SVG (install with expo install react-native-svg first) and is super easy to set up

内容的提问来源于stack exchange，提问作者M.Kalidass