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

Question

我正在尝试将一个组件导入我的 App.js class，但是当我尝试时，我的 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'
  },
});

App.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

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

invariant violation: element type is invalid React native

export

render

react-native