Reactjs 试图用相同的名称注册两个视图

我不知道它为什么返回这个错误。它可能必须处理其中一个依赖项与另一个不兼容的情况。我还安装了一个react原生webview依赖项以及canvas。我不知道这是否是导致错误的原因。mypackage.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, 0.2)",
              "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,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});
 

import React，{Component}来自'React'；
从“反应本地日期”导入日期；
从“力矩”中导入力矩；
从“react native chartjs”导入图表；
从“react native Canvas”导入画布；
进口{
安全区域视图，
样式表，
滚动视图，
看法
文本，
状态栏，
}从“反应本机”；
进口{
标题，
学习重新链接，
颜色，
调试说明，
重新加载指令，
}来自“react native/Libraries/NewAppScreen”；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.chart=null；
此.state={
startDate:null，
endDate:null，
focusedInput:null，
日期：[]
};
this.handleDatesChange=this.handleDatesChange.bind（this）；
this.handleFocusChange=this.handleFocusChange.bind（this）；
this.updateChart=this.updateChart.bind（this）；
}
componentDidMount（）{
this.chart=新图表（this.node{
键入：“行”，
数据：{
标签：[]，
数据集：[
{
标签：“喜欢的人”，
数据：[]，
背景颜色：[
"rgba(255,99,132,0.2),，
“rgba（54162235,0.2）”，
rgba（255、206、86、0.2）
]
}
]
}
});
}
handleDatesChange（{startDate，endDate}）{
让日期=[]；
为了(
设m=力矩（起始日期）；
m、 差异（时间（结束日期），“天”）{
让data=this.randomData（this.state.dates.length）；
this.updateChart（this.state.dates，data）；
});
}
handleFocusChange（聚焦输入）{
this.setState（{focusedInput}）；
}
updateChart（标签、数据）{
this.chart.data.labels=标签；
this.chart.data.datasets[0]。data=data；
this.chart.update（）；
}
随机数据（长度）{
让数据=[]；
for（设i=0；i
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#FFFFFF”
},
滚动视图：{
背景颜色：颜色。颜色较浅，
},
发动机：{
位置：'绝对'，
右:0,，
},
正文：{
背景颜色：Colors.white，
},
节容器：{
玛金托普：32，
水平方向：24，
},
章节标题：{
尺寸：24，
重量：'600'，
颜色：颜色，黑色，
},
章节说明：{
玛金托普：8，
尺码：18，
fontWeight:'400'，
颜色：颜色，
},
亮点：{
重量：'700'，
},
页脚：{
颜色：颜色，
尺寸：12，
重量：'600'，
填充：4，
paddingRight:12，
textAlign:'右'，
},
});

在您的package.json中，替换

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

与

并进行纱线或npm安装

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