Как исправить 'Инвариантное Нарушение: Тип элемента недопустим при использовании response-native-svg-charts с Expo - PullRequest
Новая
       10

Как исправить 'Инвариантное Нарушение: Тип элемента недопустим при использовании response-native-svg-charts с Expo

0 голосов
/ 12 февраля 2019

Я пытаюсь добавить градиент к моей диаграмме области, используя response-native-svg-charts из этого примера: https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-chart/with-gradient.js.

Код компилируется, но я получаю следующую ошибку во время выполнения:

https://imgur.com/nasKm9x (извините, мне не хватает) репутации для публикации изображения)

Я использую Expo на своем телефоне Android.Я довольно новичок в программировании, поэтому я не уверен, что даже попробовать. 

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;

1 Ответ

0 голосов
/ 16 февраля 2019

В примере, который вы связали с компонентами Defs, LinearGradient и Stop, были импортированы из react-native-svg.Таким образом, эти компоненты могут быть undefined в библиотеке react-native-svg-charts, что объясняет ошибку, которую вы видите.

Попробуйте исправить в ней импорт (установка react-native-svg, если вы этого еще не сделали): 

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