不变违规：元素类型无效：预期字符串：React-Native答案

【问题标题】：Invariant Violation: Element type is invalid: expected a string : React-Native不变违规：元素类型无效：预期字符串：React-Native
【发布时间】：2018-09-20 02:28:04
【问题描述】：

我是 react-native 的新手。我正在尝试构建登录表单并在成功验证后导航，或者在登录失败时打印错误。

登录失败案例运行正常，但登录成功后无法导航。

这里是 LoginForm.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { loginUser } from './actions';

import { Button, Card, CardItem, Input, Spinner } from './common';

class LoginForm extends Component {

constructor(){
  super();
  this.state = {
    username: '',
    password: ''
  };
}
componentWillReceiveProps(nextProps) {

  if(nextProps.user){
    this.props.navigation.navigate('Home');
  }
}
_onLoginPressed(){
  const { username, password } = this.state;
  this.props.loginUser({ username, password });
}
  _renderButton() {
    if(this.props.loading){
      return <Spinner />
    }
    return (
      <Button onPress={this._onLoginPressed.bind(this)}>Login</Button>
    );
  }

  render() {

    return(
        <Card>

          <CardItem>
             <Input
               label='Email'
               placeholder='Enter your email'
               secureTextEntry={false}
               onChangeText={(username) => this.setState({ username }) }
             />
          </CardItem>

          <CardItem>
             <Input
               label='Password'
               placeholder='Enter your password'
               secureTextEntry
               onChangeText={(password) => this.setState({ password }) }
             />
          </CardItem>

          <Text>{this.props.error}</Text>
          <CardItem>
            { this._renderButton() }
          </CardItem>

        </Card>
    );

  }

}

const mapStateToProps = state => {
  return {
    error: state.auth.error,
    loading: state.auth.loading,
    user: state.auth.user


   }
    }

//Export component to be available for other compnents in the Apps
export default connect(mapStateToProps, { loginUser })(LoginForm);

这是我的 RootNavigator.js：

import { StackNavigator } from 'react-navigation';
import Home from './Home';
import LoginForm from './LoginForm';

const RootNavigator = StackNavigator({
  Login: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login'
    }
  },
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
      headerLeft: false
    }
  }
});

export default RootNavigator;

Home.js：

 import React, { Component } from 'react';
    import { View } from 'react-native';
    import Button from './common/Button';

    class Home extends Component {

    constructor(){
      super();
      this.state = {
        title: 'Title from state'
      };
    }
    _onLoginPressed(){

      this.props.navigation.navigate('Login');
    }

      render() {
    return(
      <View>
      <Button onPress={this._onLoginPressed.bind(this)}>Login</Button>
      </View>
    );
  }
}

export default Home;

当我有成功凭据和登录时，应该导航到主屏幕，但我收到了这个错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This error is located at:
    in RCTView
    in Home
    in SceneView
    in RCTView
    in RCTView
    in RCTView
    in AnimatedComponent
    in Screen
    in Card
    in Container
    in RCTView
    in RCTView
createFiberFromElement
    index.delta?platform=android&dev=false&minify=false:10116:24
<unknown>
    index.delta?platform=android&dev=false&minify=false:10818:287
reconcileChildrenAtExpirationTime

请帮忙，我错过了什么？

【问题讨论】：

你能添加你的Home组件吗？
你能分享主屏幕的代码吗？ 1.) 导出语句 2.) 渲染函数。
你确定'import LoginForm from './LoginForm'的地址吗？对吗？
谢谢，我更新了问题。

标签： react-native

【解决方案1】：

通常，您在导出其中一个文件（Home 或 LoginForm）时会遇到问题。所以只需添加其他文件即可查看它。

【讨论】：

【解决方案2】：

转到./common 并确保您的组件被正确导出，尤其是Button。因为看起来你有一个./common 按钮和一个./common/Button 按钮

【讨论】：