React Native View Config не найден для имени пути

Question

Я столкнулся с этой ошибкой. Инвариантное нарушение: просмотр конфигурации не найден для имени пути. Убедитесь, что имена компонентов начинаются с заглавной буквы. Ошибка отображается во вложении.

Ошибка

TimerController. js

import React, {Component} from 'react'
import { StyleSheet, Text, View } from 'react-native';
import WorkController from './WorkController'

export default class TimerControllers extends Component {
  render(){
    return (
      <View>
      <WorkController
        workTime = {this.props.workTime}
        displayTime = {this.props.displayTime}
        decrementWorkTime = {this.props.decrementWorkTime}
        checked = {this.props.checked}
        handleChange = {this.props.handleChange}
      />
      </View>
    )
  }
}

WorkController . js

import React, {Component} from 'react'
import Switch from 'react-switch'
import { StyleSheet, Text, View } from 'react-native';

export default class WorkController extends Component {

  render(){
    return (
      <View>
      <Switch
        onChange={this.props.handleChange}
        checked={this.props.checked}
      />
      <Text>Switch between 25 and 5 minutes</Text>
      <Text>{this.props.displayTime}</Text>
      </View>
    )
  }
}

Приложение. js

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TimerControllers from './TimerControllers'
import Timer from './Timer'
import {Vibration} from 'react-native'

export default class App extends Component {

  constructor (){
    super()
    this.state = {
      timerId: 0,
      timerRunning: false,
      currentTime: 1500,
      displayTime: "25:00",
      displaybreakTime: "05:00",
      workTime: 1500,
      breakTime: 300,
      checked: false
    }


    this.handleChange=(checked)=> {
      if(checked===undefined) checked=this.state.checked

      if(checked===true) {
         this.setState({
           timerId: 0,
           timerRunning: false,
           currentTime: 300,
           displayTime: "05:00",
           displaybreakTime: "05:00",
           workTime: 300,
           breakTime: 300,
           checked: true
         });
     } else{
       this.setState({
         timerId: 0,
         timerRunning: false,
         currentTime: 1500,
         displayTime: "25:00",
         displaybreakTime: "05:00",
         workTime: 1500,
         breakTime: 300,
         checked: false
       })
     }

     }


    this.format=(seconds)=>{
      let m = Math.floor(seconds % 3600 / 60);
      let s = Math.floor(seconds % 3600 % 60);
      let timeFormated = (m < 10 & '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
      return timeFormated
    }

    this.decrementWorkTime=()=>{
      if (this.state.workTime !== 0) {
        this.setState(prevState => ({workTime: prevState.workTime - 1}))
      } else {
        this.stopTimer()
      }
    }

    this.startTimer = () => {
      this.setState({
        timerId: this.timerId+1,
        timerRunning: true,
        timerTime: this.workTime,
        timerStart: this.workTime
      });

      this.timer = setInterval(() => {
          if(this.state.timerRunning===true){
            this.decrementWorkTime();
            if (this.state.workTime >= 0) {
              this.setState({
                timerRunning: true,
                displayTime: this.format(this.state.workTime),
                workTime: this.state.workTime,
                timerTime: this.state.workTime
              });

              if (this.state.workTime === 0) {
                Vibration.vibrate([500, 500, 500])
              }

            } else {
              clearInterval(this.timer);
              this.setState({
                workTime: 0.0,
                displayTime: "00:00",
                timerRunning: false
              });
            }

          } else {
            clearInterval(this.timer);
            this.setState({
              workTime: this.state.currentTime,
              timerRunning: false
            });
          }
        }, 10);
      }

      this.stopTimer=()=>{
        this.setState({
          timerRunning: !this.state.timerRunning,
          displayTime: this.format(this.state.workTime),
          workTime: this.state.workTime
        });
        clearInterval(this.timer);
      }

      this.resetTimer=()=>{
        this.stopTimer()
        this.setState({
          timerRunning: this.state.timerRunning,
          displayTime: this.format(this.state.currentTime),
          workTime: this.state.currentTime
        })
        clearInterval(this.timer)
      }

      this.incrementBreakTime=()=>{
        this.setState({
          breakTime: this.state.breakTime + 1
        })
      }

      this.decrementBreakTime=()=>{
        this.setState({
          breakTime: this.state.breakTime - 1
        })
      }
  }

  shouldComponentUpdate() {
    if (this.state.timerRunning === false) {
      console.log("stop");
      clearInterval(this.timer);
    }
    return this.resetTimer;
  }

  render(){
    return(
      <View>
      <Text>Pomodoro Clock</Text>
      <TimerControllers
        workTime={this.state.workTime}
        displayTime={this.state.displayTime}
        breakTime={this.state.breakTime}
        startTimer={this.startTimer}
        checked={this.state.checked}
        handleChange={this.handleChange}
        decrementWorkTime={this.decrementWorkTime}
      />
      <Timer timerRunning={this.state.timerRunning}
        currentTime={this.state.currentTime}
        startTimer={this.startTimer}
        stopTimer={this.stopTimer}
        resetTimer={this.resetTimer}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Я не могу понять, что происходит, поскольку я новичок in React Native Development

Пожалуйста, сообщите.

С уважением,

Micheale

Answer 1

Вы получаете указанную выше ошибку из-за неправильного импорта Switch в WorkController. js

импортируйте его следующим образом import { Switch} from 'react-switch';

И еще я не уверен, что Reaction-switch работает в реагирующем-родном, по умолчанию в реагирующем-родном есть компонент Switch, который можно импортировать как

import { Switch } from 'react-native';

И вы можете использовать его в WorkController следующим образом: js вот так:

  <Switch
    onValueChange={this.props.handleChange}
    value={this.props.checked}
  />

вместо

<Switch
    onChange={this.props.handleChange}
    checked={this.props.checked}
  />

Надеюсь, это поможет!