不变违规：不变违规：元素类型无效：期望一个字符串（对于内置组件）但得到：undefined

Question

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

这是当我将鼠标悬停在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} onPress{this.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

Answer 1

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