嗨,我在创建按钮组件时遇到此问题,这里是错误:
不变违规:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。
这是Login.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,
}
});
下面是我的Button.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;
我想念什么?功能?
最佳答案
您使用默认值,那么它只是在尝试分解一个函数/类
import Button from './components/button';
像这样做。这就是我们从其他组件导入默认导出的方式