Invariant Violation：Invariant Violation：元素类型无效：预期为字符串（对于内置组件）但得到：未定义

Posted 2023-02-21

【中文标题】Invariant Violation：Invariant Violation：元素类型无效：预期为字符串（对于内置组件）但得到：未定义

【英文标题】：Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) but got: undefined

【发布时间】：2019-02-09 22:29:29

【问题描述】：

我在尝试运行我的应用程序时遇到上述错误。

这是当我将鼠标悬停在 App.js 文件中 render() 的左括号上时弹出的错误。

编辑：添加代码

App.js

import React from 'react';
import  StyleSheet, Text, View from 'react-native';

import StackNavigator from 'react-navigation';
import Login from 'apps/components/Login';

const NavigationApp = StackNavigator(
    Home: screen: Login
    ,, 
        navigationOptions:
            header: false,
        
    
);

export default class App extends React.Component 
  render() 
    return (
        <NavigationApp />
    );
  

Login.js

import React from 'react';
import  StyleSheet, Text, View, TextInput, AsyncStorage, 
ToacheableOpacity,KeyboardAvoidingView from 'react-native';
import StackNavigator from 'react-navigation';

export default class Login extends React.Component 
    constructor (props)
        super(props);
        this.state=
            username:'',
            password:'',
        
    

    componentDidMount()
        this._loadInitialState().done();
    

    _loadInitialState = async () => 
        var value= await AsyncStorage.getItem('user');
        if (value != null)
            this.props.navigation.navigate('profile');
        
    

    render() 
      return (
        <KeyboardAvoidingView behavior='padding' style=styles.wrapper>
          <View style=styles.container>
            <TextInput style=styles.textInput
            placeholder='Usuario' onChangeText=(username)=> this.setState(username)/>

            <TextInput style=styles.textInput
            placeholder='Clave' onChangeText=(password)=> this.setState(password)/>

            <ToacheableOpacity>
              style=styles.button onPressthis.login
              <Text style=styles.buttonText>Iniciar Seccion</Text>
            </ToacheableOpacity>
          </View>
        </KeyboardAvoidingView>
      );
    

    login = () =>
        fetch('https://wb382.com/api/mobile/login.php', 
            method: 'post',
            headers: 
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            ,
            body: JSON.Stringify(
                username: this.state.usersame,
                password: this.state.password,
            )
        )

        .then((response)=>response.json())
        .then((res)=>
            if (res.success===true)
                AsyncStorage.setItem('user',res.user);
                this.props.navigation.navigate('profile')
            else
                alert(res.message);
            
        )
    


const styles = StyleSheet.create(
    wrapper:
        flex: 1,
    ,
    container:
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000',
        paddingLeft: 40,
        paddingRight: 40,
    ,
    buttonText:
        fontSize: 26,
        color: '#fff',
    ,
    textInput:
        alignSelf: 'stretch',
        padding: 16,
        marginBotton: 20,
        backgroundColor: '#fff',
    ,
    button:
        alignSelf: 'stretch',
        backgroundColor: '#1fd100',
        padding: 20,
        alignItems: 'center',
    
);

我不知道这些文件中的哪个产生了错误。

为了模拟这些代码，我还将我的代码托管在 expo.io

https://snack.expo.io/@wilson382/my-first-mobile-app

【问题讨论】：

请添加您的代码，而不是代码图像

【参考方案1】：

登录组件在“ToacheableOpacity”中有错误。在 import 语句和 render 方法中都写错了。它是TouchableOpacity。我已经编辑了您的演示代码，并更改为正确的名称修复了错误。