不变的违规元素类型无效，预期为字符串（对于内置组件）或类

Question

我知道之前曾有人问过这个问题，但不幸的是，在阅读完解决方案后，我无法解决此问题。我已经为此工作了几个小时，并不断收到此错误。我正在使用Nexus 6模拟器，API 27和Oreo 8.1。我的Login.js文件底部是否需要“导出”语句？ Login.js文件位于根目录下的“ src”文件夹中。任何帮助是极大的赞赏。谢谢！

App.js

import React, { Component } from 'react';
import {
  StyleSheet, 
  Text, 
  View
} from 'react-native';
import Login from './src/Login';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Login />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

和Login.js

import React, { Component } from 'react';
import {
  StyleSheet, 
  Text, 
  View,
} from 'react-native';
import { MKTextfield, MKColor, MKButton } from 'react-native-material-kit';

const LoginButton = MKButton.coloredButton()
    .withText('LOGIN')
    .build();

const styles = StyleSheet.create({
        form: {
            paddingBottom: 10,
            width: 200,           
        },
        fieldStyles: {
            height: 40,
            color: MKColor.Orange,
            width: 200,
        },
        loginButtonArea: {
            marginTop: 20,
        },
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
});  

export default class Login extends Component {
    state = {
        email: '',
        password: '',
    };

    onButtonPress() {
        console.log('Clicked Button!!!');
    }

  render() {
    const { form, fieldStyles, loginButtonArea, errorMessage, welcome, container } = styles;
    return (
      <View style={container}>
        <Text style={welcome}>
            Welcome!
        </Text>
        <MKTextfield 
            text={this.state.email}
            onTextChange={email => this.setState({ email })}
            textInputStyle={fieldStyles}
            placeholder={'Email...'}
            tintColor={MKColor.Teal}
        />
        <MKTextfield 
            text={this.state.password}
            onTextChange={password => this.setState({ password })}
            textInputStyle={fieldStyles}
            placeholder={'Password...'}
            tintColor={MKColor.Teal}
            password={true}
        />
        <Text style={errorMessage}>
            {this.state.error}
        </Text>
        <View style={loginButtonArea}>
            <LoginButton onPress={this.onButtonPress.bind(this)} />
        </View>
      </View>
    );
  }
}