不变违规：元素类型无效 React Native

Question

我正在尝试将一个组件导入我的 App.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'

我的问题是，我检查了我是否在 App.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 （来自具有label道具的react-native-elements ）

对于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>
        );
    }
}

此外，请查看上面的代码，因为您的登录组件还有一些其他拼写错误，包括：secureTextEntry 和 onPress