试图注册两个具有相同名称的视图

问题描述

我不确定为什么会返回此错误。它可能需要做一些事情，其中​​一个依赖项与另一个不兼容。我还与画布一起安装了react-native-webview依赖项。我想知道这是否是导致错误的原因。我的package.json是以下内容-

    {
  "name": "angularapp","version": "0.0.1","private": true,"scripts": {
    "android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."
  },"dependencies": {
    "@react-native-community/picker": "^1.8.1","moment": "^2.29.1","react": "16.13.1","react-native": "0.63.3","react-native-axios": "^0.17.1","react-native-canvas": "^0.1.37","react-native-chartjs": "^1.0.3","react-native-dates": "^2.0.4","react-native-material-ui": "^1.30.1","react-native-paper": "^4.3.0","react-native-picker-select": "^8.0.2","react-native-scripts": "^2.0.1","react-native-webview": "^2.0.0"
  },"devDependencies": {
    "@babel/core": "^7.12.3","@babel/runtime": "^7.12.1","@react-native-community/eslint-config": "^2.0.0","babel-jest": "^26.6.1","eslint": "^7.12.1","jest": "^26.6.1","metro-react-native-babel-preset": "^0.63.0","react-test-renderer": "16.13.1"
  },"jest": {
    "preset": "react-native"
  }
} 

我正在尝试在此代码中创建与日历兼容的折线图。以下是App.js的主要代码片段

import React,{Component} from 'react';
import Dates from 'react-native-dates';
import moment from 'moment';
import Chart from 'react-native-chartjs';
import Canvas from 'react-native-canvas';
import {
  SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,} from 'react-native';

import {
  Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.chart = null;
    this.state = {
      startDate: null,endDate: null,focusedInput: null,dates: []
    };
    this.handleDatesChange = this.handleDatesChange.bind(this);
    this.handleFocusChange = this.handleFocusChange.bind(this);
    this.updateChart = this.updateChart.bind(this);
  }

  componentDidMount() {
    this.chart = new Chart(this.node,{
      type: "line",data: {
        labels: [],datasets: [
          {
            label: "# of Likes",data: [],backgroundColor: [
              "rgba(255,99,132,0.2)","rgba(54,162,235,"rgba(255,206,86,0.2)"
            ]
          }
        ]
      }
    });
  }

  handleDatesChange({ startDate,endDate }) {
    let dates = [];
    for (
      let m = moment(startDate);
      m.diff(moment(endDate),"days") <= 0;
      m.add(1,"days")
    ) {
      dates.push(m.format("YYYY-MM-DD"));
    }
    this.setState({ startDate,endDate,dates },() => {
      let data = this.randomData(this.state.dates.length);
      this.updateChart(this.state.dates,data);
    });
  }

  handleFocusChange(focusedInput) {
    this.setState({ focusedInput });
  }

  updateChart(labels,data) {
    this.chart.data.labels = labels;
    this.chart.data.datasets[0].data = data;
    this.chart.update();
  }

  randomData(length) {
    let data = [];
    for (let i = 0; i < length; i++) {
      data.push(Math.floor(Math.random() * 100) + 1);
    }
    return data;
  }

  render() {
    return (
      <View style={styles.container}>
        <Dates
          startDateId="startDate"
          endDateId="endDate"
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onDatesChange={this.handleDatesChange}
          focusedInput={this.state.focusedInput}
          onFocusChange={this.handleFocusChange}
        />
        <Canvas ref={node => (this.node = node)} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',backgroundColor: '#FFFFFF'
  },scrollView: {
    backgroundColor: Colors.lighter,},engine: {
    position: 'absolute',right: 0,body: {
    backgroundColor: Colors.white,sectionContainer: {
    marginTop: 32,paddingHorizontal: 24,sectionTitle: {
    fontSize: 24,fontWeight: '600',color: Colors.black,sectionDescription: {
    marginTop: 8,fontSize: 18,fontWeight: '400',color: Colors.dark,highlight: {
    fontWeight: '700',footer: {
    color: Colors.dark,fontSize: 12,padding: 4,paddingRight: 12,textAlign: 'right',});
 

解决方法

在您的package.json中，替换

"react-native-webview": "^2.0.0"

使用

"react-native-webview": "^10.3.2",

然后安装yarn或npm。