在React Native中使用图表组件时遭遇文件不存在错误

问题详情 #

尝试在React Native应用中制作环形图，先后使用Victory-native和react-native-gifted-charts两个库，均出现**“文件不存在”类模块解析错误**，错误提示表现为无法找到指定模块的文件路径。

使用react-native-gifted-charts的代码示例：

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { BarChart, LineChart, PieChart, PopulationPyramid } from "react-native-gifted-charts";

const App = () => {
  const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
  return (
    <View>
      <BarChart data = {data} horizontal />
    </View>
  )
}

export default App
const styles = StyleSheet.create({})

解决步骤 #

• 重新安装依赖并清理缓存

  1. 卸载当前问题库：

     npm uninstall react-native-gifted-charts victory-native
     

  2. 清理npm/yarn缓存：

     npm cache clean --force
     # 若使用yarn则执行：yarn cache clean
     

  3. 重新安装目标库：

     npm install react-native-gifted-charts
     # 若使用yarn则执行：yarn add react-native-gifted-charts
     

  4. iOS项目需重新安装Pods：

     cd ios && pod install && cd ..
     

• 匹配React Native版本兼容性
  查看所用库的官方文档，确认库版本与你的React Native版本兼容（例如react-native-gifted-charts要求RN版本≥0.60），若版本不匹配，安装对应兼容版本的库。

• 修正组件导入与使用
  若目标是制作环形图，react-native-gifted-charts中对应的组件是DonutChart而非PieChart，修正代码如下：

  import { StyleSheet, View } from 'react-native'
  import React from 'react'
  import { DonutChart } from "react-native-gifted-charts";
  
  const App = () => {
    const data=[ 
      {value:50, color: '#ff4d6d'}, 
      {value:80, color: '#4cc9f0'}, 
      {value:90, color: '#f72585'}, 
      {value:70, color: '#4361ee'} 
    ]
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <DonutChart data={data} />
      </View>
    )
  }
  
  export default App
  const styles = StyleSheet.create({})
  

• 重置Metro服务器
  关闭当前运行的Metro服务，执行以下命令重启并清除缓存：

  npx react-native start --reset-cache
  

• 检查文件路径大小写
  若使用Mac/Linux系统，注意文件路径大小写敏感，确保导入的模块名称与实际文件名称一致。

内容的提问来源于stack exchange，提问作者Yadwinder Singh