React Native 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到了： object

Question

我正在尝试运行下面的代码，但我不断收到错误元素类型无效。

为什么我总是收到这个错误？我卸载了所有模块，然后再次重新安装，但仍然出现相同的错误。

我不断收到请检查 AnalyticsScreen 的渲染方法。

我正在尝试显示一个动态折线图，用户可以在该图上移动光标。

import {
  StyleSheet, View, Dimensions, Animated, TextInput,
} from 'react-native';
import * as Svg from 'react-native-svg';
import * as path from 'svg-path-properties';
import * as shape from 'd3-shape';

import {
  scaleTime,
  scaleLinear,
  scaleQuantile,
} from 'd3-scale';


const {
  Path, Defs, LinearGradient, Stop,
} = Svg;
const d3 = {
  shape,
};

const height = 200;
const { width } = Dimensions.get('window');
const verticalPadding = 5;
const cursorRadius = 10;
const labelWidth = 100;

const data = [
  { x: new Date(2018, 9, 1), y: 0 },
  { x: new Date(2018, 9, 16), y: 0 },
  { x: new Date(2018, 9, 17), y: 200 },
  { x: new Date(2018, 10, 1), y: 200 },
  { x: new Date(2018, 10, 2), y: 300 },
  { x: new Date(2018, 10, 5), y: 300 },
];

const scaleX = scaleTime().domain([new Date(2018, 9, 1), new Date(2018, 10, 5)]).range([0, width]);
const scaleY = scaleLinear().domain([0, 300]).range([height - verticalPadding, verticalPadding]);
const scaleLabel = scaleQuantile().domain([0, 300]).range([0, 200, 300]);
const line = d3.shape.line()
  .x(d => scaleX(d.x))
  .y(d => scaleY(d.y))
  .curve(d3.shape.curveBasis)(data);
const properties = path.svgPathProperties(line);
const lineLength = properties.getTotalLength();

function AnalyticsScreen() {

 const cursor = React.createRef();

const label = React.createRef();

let x = new Animated.Value(0);

const moveCursor=(value)=> {
  const { x, y } = properties.getPointAtLength(lineLength - value);
  cursor.current.setNativeProps({ top: y - cursorRadius, left: x - cursorRadius });
  const label = scaleLabel(scaleY.invert(y));
  label.current.setNativeProps({ text: `${label} CHF` });
}

;

x.addListener(({ value }) => {
moveCursor(value)
})

const translateX = x.interpolate({
  inputRange: [0, lineLength],
  outputRange: [width - labelWidth, 0],
  extrapolate: 'clamp',
});

    return(
      <View style={styles.root}>
      <View style={styles.container}>
        <Svg {...{ width, height }}>
          <Defs>
            <LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="gradient">
              <Stop stopColor="#CDE3F8" offset="0%" />
              <Stop stopColor="#eef6fd" offset="80%" />
              <Stop stopColor="#FEFFFF" offset="100%" />
            </LinearGradient>
          </Defs>
          <Path d={line} fill="transparent" stroke="#367be2" strokeWidth={5} />
          <Path d={`${line} L ${width} ${height} L 0 ${height}`} fill="url(#gradient)" />
          <View ref={cursor} style={styles.cursor} />
        </Svg>
        <Animated.View style={[styles.label, { transform: [{ translateX }] }]}>
          <TextInput ref={label} />
        </Animated.View>
        <Animated.ScrollView
          style={styles.absoluteFill}
          contentContainerStyle={{ width: lineLength * 2 }}
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
          bounces={false}
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: { x },
                },
              },
            ],
            { useNativeDriver: true },
          )}
          horizontal
        />
      </View>
    </View>
        );
}

export default AnalyticsScreen;```