不變違規：登錄頁面react-native上的元素類型無效

Question

所以我對reactnative很新，目前我正在使用react native進行登錄頁面，我的應用程序出現了這個錯誤

不變違規：元素類型無效：期望字符串（對於內置組件）或類/函數（對於復合組件）但未定義。 您可能忘記從其定義的文件中導出組件，或者您可能混淆了默認導入和命名導入。 檢查'Button'的render方法。

這是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 };

任何想法為什么這發生在我的應用程序？ 謝謝

更新：我按照下面的解決方案，它出現了另一個錯誤

任何解決方案

Answer 1

在你的Button.js中你應該寫：

export default Button;

你的導入應該是：

import Button from './components/Button';

代替 ：

export { Button };

在這種情況下，最好有export default Button 。

Answer 2

與您的代碼的問題是，當你輸入TouchableOpactity在Button.js 。 它應該是TouchableOpacity