React native 如何修复'；不变冲突：使用带有Expo的react本机svg图表时元素类型无效

我试图使用本例中的react本机svg图表向面积图添加渐变：

代码已编译，但在运行时出现以下错误：

（抱歉，我没有足够的）声誉来发布图片）

我在安卓手机上使用Expo。我对编程相当陌生，所以我甚至不知道该尝试什么

import * as shape from 'd3-shape'
import { View } from 'native-base';
import * as React from 'react';
import { AreaChart, Defs, LinearGradient, Path, Stop } from 'react-native-svg-charts'
// import styles from './styles';

class DashboardChart extends React.Component {
  render() {
    const data = [ 50, 10, 40, 95, 14, 24, 85, 91, 35, 53, 53, 24, 50, 20, 80 ]

        const ChartLine = ({line}) => (
            <Path
                key={'line'}
                d={line}
                stroke={'rgb(134, 65, 244)'}
                fill={'none'}
            />
        )

        const Gradient = ({ index }) => (
          <Defs key={index}>
              <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
                  <Stop offset={'0%'} stopColor="blue" stopOpacity={1}/>
                  <Stop offset={'100%'} stopColor="white" stopOpacity={1}/>
              </LinearGradient>
          </Defs>
      )

    return (
          <View>
            <AreaChart
                style={{ height: 200 }}
                data={data}
                contentInset={{ top: 40, bottom: 10 }}
                curve={shape.curveNatural}
                svg={{
                  fill: 'url(#gradient)'
                }}
            >
                {/* <Grid/> */}
                <Gradient/>
                <ChartLine/>
            </AreaChart>
          </View>
    );
  }

}

export default DashboardChart;

import*作为“d3形状”中的形状
从“本机基”导入{View}；
从“React”导入*作为React；
从“react native svg charts”导入{AreaChart，Defs，LinearGradient，Path，Stop}
//从“./styles”导入样式；
类DashboardChart扩展React.Component{
render（）{
常量数据=[50,10,40,95,14,24,85,91,35,53,53,24,50,20,80]
常量图表线=（{line}）=>(
)
常数梯度=（{index}）=>(
)
返回(
{/*  */}
);
}
}
导出默认仪表板图；

在链接到

Defs

的示例中，

LinearGradient

和

Stop

组件是从

react native svg

导入的。因此，这些组件在

react native svg charts

库中可能是

未定义的

，这将解释您看到的错误

尝试将您的导入修复到此（如果尚未安装，请安装

react native svg

）：

---

在链接到

Defs

的示例中，

LinearGradient

和

Stop

组件是从

react native svg

导入的。因此，这些组件在

react native svg charts

库中可能是

未定义的

，这将解释您看到的错误

尝试将您的导入修复到此（如果尚未安装，请安装

react native svg

）：

import { AreaChart } from 'react-native-svg-charts'
import { Defs, LinearGradient, Path, Stop } from 'react-native-svg'