javascript - 不变违规 : Element type is invalid on login page react-native

Question

所以我是 reactnative 的新手，目前我正在用 react native 制作一个登录页面，我得到了这个 error在我的应用程序上

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'Button'.

这里是 App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
import { Input } from './components/Input';
import { Button } from './components/Button';

export default class App extends React.Component {
  state = {
    email: '',
    password: ''
  }
  render() {
    return (
      <View style={styles.container}>
        <Input
          placeholder='Enter your mail...'
          label='Email'
          onChangeText={email => this.setState({email})}
          value={this.state.email}
        />
        <Input
          placeholder='Enter your password'
          label='Password'
          secureTextEntry
          onChangeText={password => this.setState({password})}
          value={this.state.password}
        />
        <Button onPress={() => console.log('pressed')}>Log In</Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
});

这是 Button.js

import React from 'react';
import {StyleSheet, Text, TouchableOpactity} from 'react-native';

const Button = ({ onPress, children }) => {
    return (
        <TouchableOpactity onPress={onPress} style={styles.button}>
            <Text style={styles.text}> { children } </Text>
        </TouchableOpactity>

    )
}

const styles = StyleSheet.create({
    button: {
        marginTop: 10,
        padding: 20,
        width: '100%',
        backgroundColor: '#00aeef',
        borderRadius: 4,
        alignItems: 'center',
      },
      text: {
        color: 'white',
        fontWeight: '700',
        fontSize: 18,
      }
    });

export { Button };

知道为什么我的应用会发生这种情况吗？谢谢

更新:我按照下面的解决方案，它提出了另一个 error

任何解决方案

Answer 1

在你的 Button.js 中你应该写:

export default Button;

你的导入应该是:

import Button from './components/Button';

代替:

export { Button };

在这种情况下，最好使用 export default Button。