нарушение инварианта: недопустимый тип элемента

Question

Я пытаюсь импортировать компонент в мое приложение. js класс, но при попытке получить ошибку в моем android эмуляторе

invariant violation element type is invalid: expected a string or a class/function but got undefined you likely forgot to export your component from the file its defined in, or you might have mixed up default and named imports

check the render method of 'login'

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

import React, {Component} from 'react';
import {StyleSheet,ScrollView,View,Text,Input,Button,SecureTextEntry,ActivityIndicator} from 'react-native';
import * as firebase from 'firebase';
import auth from '@react-native-firebase/auth';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

 export default class Login extends Component {
     state={
         email: '',
         password: '',
         authenticating: false
     };

  componentDidMount(){
    const firebaseConfig = {
    apiKey: 'garbagekey',
    authDomain: 'garbage auth domain'
      }
      firebase.initializeApp(firebaseConfig)
    }

    onButtonPress = () =>{
        console.log("button pressed")
        this.setState({authenticating:true})
    }

    contentBoolRender = () =>{
        if(this.state.authenticating===true){
            return(
            <View>
                <ActivityIndicator size="large"/>

            </View>
            ) 
        }

        return(
            <View>
                <Input
                    placeholder="Enter your Email..."
                    label = "Email"
                    onChangeText = {email => this.setState({email})}
                    value = {this.state.email}
                />

                <Input
                    placeholder="Enter your Password..."
                    label = "Password"
                    onChangeText = {password => this.setState({password})}
                    value = {this.state.password}
                    SecureTextEntry
                />
                    <Button title="login" onpress={()=>this.onButtonPress()}></Button>
            </View>
        )
    }


  render() {
    return(
        <View>
        {this.contentBoolRender()}
        </View>
    );
  }
}

const styles = StyleSheet.create({
  login:{
    padding: 20,
    backgroundColor: 'white'
  },
});

приложения. js

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button,
} from 'react-native';
import * as firebase from 'firebase';
import auth from '@react-native-firebase/auth';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Notes from "./notes.js";
import CreateNote from "./createnote.js";
import Login from "./login.js";

 class App extends Component {
  state = {
    loggedin: false,
    notes: [
      {
        id: 1,
        text: "mow the lawn",
        author: "dean",
        time: "10am"
      },
      {
        id: 2,
        text: "feed the dog",
        author: "sam",
        time: "2pm"
      }
    ]
  };

  componentDidMount(){
    const firebaseConfig = {
    apiKey: 'AIzaSyABmRXh2nlBt4FtjfOWNaoz7q5Wy5pGFlc',
    authDomain: 'familytodo-28018.firebaseapp.com'
      }
      firebase.initializeApp(firebaseConfig)
    }
    confirmLogin=()=>{
      this.setState({loggedin:true})
    }


  updateNotes = (title, name, eventTime) => {
    console.log("making new note");
    let newNote = {
      text: title,
      author: name,
      time: eventTime
    };
    this.setState(state => {
      const list = state.notes.concat(newNote);
      console.log(list);
      return {
        notes: list
      };
    });
  };

  deleteNotes = note => {
    console.log("note deleted", note.id);

    this.setState(state => {
      var list = this.state.notes;
      for (let i = 0; i < this.state.notes.length; i++) {
        if (this.state.notes[i].id === note.id) {
          list.pop(i);
        }
      }
      return {
        notes: list
      };
    });
  };


  conditionalRender=()=>{
    if(this.state.loggedin===false){
      return (
        <View>
          <Login confirmlogin = {this.confirmLogin} />
        </View>
      )
    }

    return(
      <View>
          <CreateNote
            handleName={this.handleName}
            handleEvent={this.handleEvent}
            handleTime={this.handleTime}
            updateNotes={this.updateNotes}
          />
          <Notes style={styles.notes} notes={this.state.notes} deleteNotes={this.deleteNotes} />
        </View>
    );
  }

  render() {
   return(
    <View>
    {this.conditionalRender()}
    </View>
   );

  }
}

const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  },
  logo: {
    height: 80
  },
  header: {
    padding: 20
  },
  title: {
    fontWeight: "bold",
    fontSize: 15,
    marginVertical: 10,
    textAlign: "center"
  },
  notes:{
    marginHorizontal: '50%'
  },
  text: {
    lineHeight: 15,
    fontSize: 11,
    marginVertical: 11,
    textAlign: "center"
  },
  link: {
    color: "#1B95E0"
  },
  code: {
    fontFamily: "monospace, monospace"
  }
});

export default App;

любая помощь будет признательна, пожалуйста, помогите мне предоставить более подробную информацию, если это возможно:)

Answer 1

Я думаю, это происходит потому, что react-native не имеет экспортированного члена с именем Input. Я думаю, что вы ищете TextInput (из react-native) или Input (из react-native-elements, который имеет label опору)

Для TextInput попробуйте изменить компонент входа на это:

import React, {Component} from 'react';
import {ActivityIndicator, Button, TextInput, View} from 'react-native';
import * as firebase from 'firebase';

export default class Login extends Component {
    state = {
        email: '',
        password: '',
        authenticating: false
    };

    componentDidMount() {
        const firebaseConfig = {
            apiKey: 'garbagekey',
            authDomain: 'garbage auth domain'
        };
        firebase.initializeApp(firebaseConfig);
    }

    onButtonPress = () => {
        console.log("button pressed");
        this.setState({authenticating: true});
    };

    contentBoolRender = () => {
        if (this.state.authenticating === true) {
            return (
                <View>
                    <ActivityIndicator size="large"/>

                </View>
            );
        }

        return (
            <View>
                <TextInput
                    placeholder="Enter your Email..."
                    onChangeText={email => this.setState({email})}
                    value={this.state.email}
                />

                <TextInput
                    placeholder="Enter your Password..."
                    onChangeText={password => this.setState({password})}
                    value={this.state.password}
                    secureTextEntry
                />
                <Button title="login" onPress={() => this.onButtonPress()}/>
            </View>
        );
    };

    render() {
        return (
            <View>
                {this.contentBoolRender()}
            </View>
        );
    }
}

или для Input попробуйте использовать это:

import React, {Component} from 'react';
import {ActivityIndicator, Button, View} from 'react-native';
import { Input } from 'react-native-elements';
import * as firebase from 'firebase';

export default class Login extends Component {
    state = {
        email: '',
        password: '',
        authenticating: false
    };

    componentDidMount() {
        const firebaseConfig = {
            apiKey: 'garbagekey',
            authDomain: 'garbage auth domain'
        };
        firebase.initializeApp(firebaseConfig);
    }

    onButtonPress = () => {
        console.log("button pressed");
        this.setState({authenticating: true});
    };

    contentBoolRender = () => {
        if (this.state.authenticating === true) {
            return (
                <View>
                    <ActivityIndicator size="large"/>

                </View>
            );
        }

        return (
            <View>
                <Input
                    placeholder="Enter your Email..."
                    label = "Email"
                    onChangeText={email => this.setState({email})}
                    value={this.state.email}
                />

                <Input
                    placeholder="Enter your Password..."
                    label = "Password"
                    onChangeText={password => this.setState({password})}
                    value={this.state.password}
                    secureTextEntry
                />
                <Button title="login" onPress={() => this.onButtonPress()}/>
            </View>
        );
    };

    render() {
        return (
            <View>
                {this.contentBoolRender()}
            </View>
        );
    }
}

Кроме того, ознакомьтесь с приведенным выше кодом, так как ваш компонент Login имел несколько других опечаток, включая: secureTextEntry и onPress