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

Posted 2023-02-21

【中文标题】不变违规：元素类型无效 - React Native

【英文标题】：Invariant Violation: Element type is invalid - React Native

【发布时间】：2019-12-28 21:23:43

【问题描述】：

Git hub 仓库在这里：https://github.com/AliYar-Khan/react-navigation.git

当我要在我的 Genny 运动模拟器上运行我的 react 本机应用程序时，此错误显示在红色背景区域中。

Invariant Violation：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：对象。您可能忘记从 文件中定义。

这是 'src/pages/' 文件夹中的 Login.js

import * as React from 'react';
import 
  TouchableOpacity ,
  View , 
  StyleSheet , 
  ScrollView , 
  Text , 
  TextInput , 
  Dimensions , 
  Alert 
 from 'react-native';

import  connect  from 'react-redux';
import Logo from '../components/Logo';
import clickLogin from '../redux/actions/loginActions';
import  Icon  from 'react-native-elements';

const  height  = Dimensions.get('window');

class Login extends React.Component 
  constructor(props)
    super(props);
    this.state = 
      username : '' ,
      password : '' ,
      screenHeight: height ,
      pendingLoginReqest : false 
     
  

  onContentSizeChange = (contentWidth, contentHeight) => 
    this.setState( screenHeight: contentHeight );
  ;

  Login = () => 
      // firebase.auth().signInWithEmailAndPassword(this.state.username , this.state.password)
      //   .then(()=>

      //   , (error) => 
      //     Alert.alert(error.message);
      //   )
    this.props.clickLogin(this.state);
  ;

  render() 
    const scrollEnabled = this.state.screenHeight > height;
    const navigate = this.props.navigation;
    return (
      <ScrollView style= flex: 1 
          scrollEnabled=scrollEnabled
          onContentSizeChange=this.onContentSizeChange
      >
      <View style=styles.container> 
          <Logo />
          <TextInput style=styles.textinput
            returnKeyType='next'
            underlineColorandroid='rgba(0,0,0,0)'
            placeholder='Email or Username'
            keyboardType='email-address'
            autoCapitalize='none'
            autoCorrect = false
            onChangeText=data => this.setState( username : data )
            onSubmitEditing=() => this.passwordInput.focus()
            placeholderTextColor = '#ffffff'
          />

          <TextInput style=styles.textinput
            underlineColorAndroid='rgba(0,0,0,0)'
            placeholder='Password'
            secureTextEntry
            returnKeyType='go'
            onChangeText=data => this.setState( password : data)
            ref= (input) => this.passwordInput = input
            placeholderTextColor = '#ffffff'
          />

          <TouchableOpacity style=styles.buttonLogin
            onPress=this.Login>
            <Text style=styles.loginButtonText>Login</Text>  
          </TouchableOpacity> 

          <View style=styles.socialLoginButtons>
            <Icon.Button name='facebook' size=15 backgroundColor='#1c313a'> 
              <Text style=fontFamily:'Arial', fontSize:15, fontSize: 16,
                fontWeight: '500', color: '#ffffff', 
                textAlign: 'center'
              >
              Login with Facebook
              </Text>
            </Icon.Button>      
          </View>

          <View style=styles.socialLoginButtons>
            <Icon.Button name='twitter' size=20 backgroundColor='#1c313a'> 
              <Text style=fontFamily:'Arial', fontSize:15,fontSize: 16,
                fontWeight: '500',color: '#ffffff',textAlign: 'center'>
                Login with Twitter
              </Text>
            </Icon.Button>      
          </View>

          <View style=styles.signuptextcont>
            <Text style=styles.signuptext>Don't have an Account?</Text>
            <TouchableOpacity style=styles.signupbtn onPress= ()=>navigate('Signup')>
              <Text style=styles.signuptext>Signup</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  


// const mapStateToProps = state => 
//   return 

//   
// 

const mapDispatchToProps = (dispatch) => 
    return 
      clickLogin : (user) => dispatch(clickLogin(user)) 
    


export default connect(null,mapDispatchToProps)(Login);

const styles = StyleSheet.create(
  container:
      flex: 1,
      alignItems: 'center',
      justifyContent:'flex-start'
  ,
  text:
    marginVertical:15,
    color: 'rgba(255,255,255,0.7)',
    fontSize: 20
  ,
  textinput:
    width: 300,
    backgroundColor : 'rgba(255,255,255,0.3)',
    borderRadius: 25,
    paddingHorizontal: 16,
    color: '#ffffff',
    marginVertical: 10
  ,
  signuptext:
    color: 'rgba(255,255,255,0.6)',
    fontSize: 16
  ,
  socialLoginButtons:
    paddingVertical: 5,
    marginVertical: 10,
    width: 300,
    backgroundColor: '#1c313a'
  ,
  signuptextcont:
    flexGrow: 1,
    alignItems: 'flex-end',
    flexDirection: 'row',
    justifyContent:'center',
    paddingVertical: 16    
  ,
  buttonLogin:
    width: 300,
    backgroundColor: '#1c313a',
    borderRadius: 25,
    paddingVertical: 12,
    marginVertical: 5
  ,
  signupbtn:
    color : '#ffffff',
    fontSize: 16,
    fontWeight: '500',
    paddingHorizontal:10
  
);

和Logo.js如下：

import * as React from 'react';
import  Image, View, StyleSheet, Text  from 'react-native';
import  TextInput  from 'react-native-gesture-handler';


export default class Logo extends React.Component 
    render() 
      return (
        <View style=styles.LogoContainer> 
            <Image style=width: 50, height: 50
              source=require('../img/favicon.png')/>
            <Text style=styles.LogoText>Welcome to the App.</Text>
        </View>
      );
    


const styles = StyleSheet.create(

   LogoContainer:
      alignItems: 'center',
      justifyContent:'center',
      marginTop:50,
      marginVertical:5,
      marginBottom:5
    ,
    LogoText:
      marginVertical:20,
      color: 'rgba(255,255,255,0.7)',
      fontSize: 20
    

);

【问题讨论】：

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object的可能重复

请检查您是否在'../components/Logo' 正确导出Logo

@Vencovsky 是的，我已经检查过了...这里是正确的，没有错误

@Peter 我已经咨询过了...但没有解决方案

@AliYarKhan 请添加到您的问题'../components/Logo' 文件中

【参考方案1】：

从堆栈跟踪来看，问题出在 Login.js 第 82 行：

      <View style=styles.socialLoginButtons>
        <Icon.Button name='facebook' size=15 backgroundColor='#1c313a'> 
          <Text style=fontFamily:'Arial', fontSize:15, fontSize: 16,
            fontWeight: '500', color: '#ffffff', 
            textAlign: 'center'
          >
          Login with Facebook
          </Text>
        </Icon.Button>      
      </View>

这里你在检查react-native-elements docs 后使用Icon.Button 没有Icon.Button 这意味着它将未定义并抛出该错误

【讨论】：

在我使用它之前......它工作正常......现在它给出了这个错误

谢谢这是问题...它也给了我关于名称道具的警告这是什么？

警告信息是什么？