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中导入了默认的登录组件，并且我从所知道的内容中正确导出了Login组件：



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（来自具有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

不变的违反：元素类型无效React native

1 个答案: