不变冲突:元素类型无效:

Question

嗨，我在创建按钮组件时遇到此问题，这是错误：

不变冲突：元素类型无效：预期字符串(对于内置组件(或类/函数(对于复合组件(，但得到：未定义。

这是登录，js代码文件

import React, { Component} from 'react';
import { StyleSheet, Text, View, Image, StatusBar, TextInput, Dimensions } from 'react-native';
import { LinearGradient } from 'expo';
import { Button }  from './components/button';
import { Ionicons } from '@expo/vector-icons';
import PropTypes from 'prop-types';
const {width: WIDTH} = Dimensions.get('window')


export default class Login extends Component {
render() {
return (
<LinearGradient
colors={['#38E870', '#2BB256']} 
style={styles.container}>
<StatusBar barStyle="light-content" />
<View style={styles.logocontainer}>
</View>
<View style={styles.formContainer}>
<View style={styles.inputcontainer}>
<Ionicons name="ios-person-outline" size={36} color="#747475" 
style={styles.inputemail}/>
<TextInput 
placeholder={'Enter Your Email'}
underlineColorAndroid={'transparent'}
placeholderTextColor="#dfe6e9"
style={styles.input}
/>
<Ionicons name="ios-unlock-outline" size={34} color="#747475" 
style={styles.inputpass}/>
<TextInput 
placeholder={'Enter Your Password'}
secureTextEntry={true}
underlineColorAndroid={'transparent'}
placeholderTextColor="#dfe6e9"
style={styles.input}
/>     
<Button 
text="Click Me"
onPress={() => {
alert("Hi there!!!");
}}
/>
</View>
</View>
</LinearGradient>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
logocontainer: {
paddingTop: 50,
},
formContainer: {
backgroundColor: '#FFF',
marginTop: 180,
width: 360,
height: 340,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.6,
shadowRadius: 6,
elevation: 8,
},
inputcontainer: {
marginTop: 30,
},
inputemail: {
position: 'absolute',
left: 18,
top: 13,
},
inputpass: {
position: 'absolute',
left: 18,
top: 77,
},
input: {
width: WIDTH -50 ,
height: 44,
padding: 10,
paddingLeft: 40,
marginVertical: 10,
marginHorizontal: 10,
borderWidth: 1,
borderRadius: 20,
borderColor: 'black',
marginBottom: 10,
}
});

下面是我的按钮代码.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
class Button extends Component {
render() {
const { text, onPress } = this.props;
return (
<TouchableOpacity style={styles.buttonStyle} onPress={() => onPress()}>
<Text style={styles.textStyle}>{text}</Text>
</TouchableOpacity>
);
}
}
Button.propTypes = {
text: PropTypes.string.isRequired,
onPress: PropTypes.func.isRequired,
};
const styles = StyleSheet.create({
textStyle: {
fontSize: 20,
color: '#ffffff',
textAlign: 'center',
},
buttonStyle: {
padding: 10,
backgroundColor: '#202646',
borderRadius: 5,
},
});
export default Button;

我错过了什么？一个功能？

Answer 1

您需要将按钮导入为

import Button from './components/button'因为它已导出为默认导出

或将按钮导出为命名导出

Answer 2

你做了export default Button.所以下面应该在你的代码中

import Button from './components/button';

按钮.js文件中没有命名导入。因此，{ Button }，使Button未定义。

Answer 3

你使用了默认值，那么它只是试图解构一个函数/类

import Button from './components/button';

这样做。这就是我们从其他组件导入默认导出的方式