React Native 在尝试使用 Victory 图表组件时给出组件异常错误答案

【问题标题】：React Native giving a Component Exception error when trying to use Victory chart componentReact Native 在尝试使用 Victory 图表组件时给出组件异常错误
【发布时间】：2021-09-17 23:05:40
【问题描述】：

所以我正在尝试使用 Victory 库进行本地反应，以便为我的预算应用程序绘制折线图。这是我的 Graph 组件中的代码

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine } from 'victory';

export default function Graph() {
    return (
        <View>
            <VictoryLine />
        </View>
        
        
    )
}

这里是组件被导入到哪里的代码

import React from 'react'
import { View, Text, StyleSheet, TextInput } from 'react-native'
import Graph from './Line'

export default function MonthSummary() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>My Summary</Text>
            <Text style={styles.subtitle}>£1,325</Text>
            <Graph />
        </View>
    )

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        width: 350,
        height: 200,
        padding: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    title: {
        textTransform: 'uppercase',
        fontSize: 14,
        fontWeight: '600',
        color: '#333333',
    },
    subtitle: {
        color: '#333333',
        fontSize: 30,
        marginTop: 5,
    }
  });

但是当我运行我的应用程序时，我得到一个组件异常错误。 Screenshot here。如果有人能提供帮助，那就太棒了，因为我已经为此苦苦挣扎了好几个小时！

【问题讨论】：

除非您指的是完全不同的库，否则导入应该来自“victory-native”，也许您不小心安装了网络库。另外，你在哪里传递数据道具？
我尝试卸载该库并检查其正确的响应原生库，但如果数据道具未通过，则数据显然填充了回退日期，因此只是为了测试它跨度>
啊，很高兴知道他们有虚拟数据。应该是这样，您的错误消息建议使用大写字母的组件名称，这听起来像是您正在使用 Web 组件，因为它们通常以小写字母开头，例如 <button> 等。
是的，我刚刚检查了我安装了网页版！感谢您的帮助:)
为了完成，我将添加一个答案，因为其他人也可能有这个问题。如果您将其标记为已接受，我将不胜感激。

标签： javascript reactjs react-native jsx victory-charts

【解决方案1】：

似乎您使用的是网络库而不是反应原生库。按照this 进行设置并将您的图形组件更改为如下所示

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine } from 'victory-native';

export default function Graph() {
    return (
        <View>
            <VictoryLine />
        </View>
        
        
    )
}

【讨论】：