[英]Invariant Violation: Element type is invalid: React Native
我4-5天前開始學習react native,現在我在React Native中建立登錄屏幕。 但是面對這個問題,我試圖解決這個問題,但不幸的是,我不能這樣做。 大家能幫我嗎? 我將在此處附加我的代碼和屏幕截圖。 錯誤截圖
App.js
import React, { Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './src/screens/Login';
export default class App extends Component {
render() {
return (
<Login />
);
}
}
這是登錄屏幕代碼
Login.js
import React, { Component} from 'react';
import { StyleSheet, TextInput, View, Image, StatusBar, Dimensions } from 'react-native';
import { LinearGradient } from 'expo';
import EStyleSheet from 'react-native-extended-stylesheet';
import { Button } from '../components/Button';
import { Ionicons } from '@expo/vector-icons';
const {width: WIDTH} = Dimensions.get('window')
EStyleSheet.build();
export default class Login extends Component {
render() {
return (
<LinearGradient
colors={['#38E870', '#2BB256']}
style={styles.container}>
<StatusBar barStyle="light-content" />
<View style={styles.logocontainer}>
<Image source={require('../images/Devastic.png/')} />
</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="Log In"
onPress={() => console.log ("Pressed")}
/>
</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 from 'react';
import { View, TouchableHighlight, TouchableNativeFeedback, Text, Platform } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
$buttonColor: '#38E870',
$buttonTextColor: '#ffffff',
$buttonUnderlayColor: '#2BB256',
button: {
backgroundColor: '$buttonColor',
paddingVertical: 10,
paddingHorizontal: 30,
marginHorizontal: 12,
borderRadius: 40,
marginTop: 20,
},
text: {
color: '$buttonTextColor',
fontSize: 18,
textAlign: 'center',
fontWeight: 'bold',
},
});
export const Button = ({ text, onPress }) => {
if (Platform.OS === 'ios') {
return (
<TouchableHighlight
onPress={onPress}
style={styles.button}
underlayColor={styles.$buttonUnderlayColor}
>
<Text style={styles.text}>{text}</Text>
</TouchableHighlight>
);
}
return (
<TouchableNativeFeedback
onPress={onPress}
background={TouchableNativeFeedback.Ripple(styles.$buttonUnderlayColor)}
>
<View style={styles.button}>
<Text style={styles.text}>{text}</Text>
</View>
</TouchableNativeFeedback>
);
};
我認為這是因為您導出Button組件的方式。
export foo;
import {foo} from 'blah';
export default foo;
import foo from 'blah';
解決您的問題
取代這個
export const Button = ({ text, onPress }) =>
有了這個
export default const Button = ({ text, onPress }) =>
有關更多詳細信息,請檢查此更多詳細信息
在Login.js文件中,您正在將Button導入為對象。
更改如下:
從
import { Button } from '../components/Button';
至
import Button from '../components/Button';
有關更多信息,請看: 未捕獲的錯誤:不變的違規:元素類型無效:預期為字符串(用於內置組件)或類/函數,但得到了:對象
希望這會有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.