react-native - 不变量违反本机反应
问题描述
我的应用程序中有此错误:
不变违规:不变违规:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
我不知道为什么这会发生在我身上,因为我没有看到任何问题。看我的屏幕代码:
import React, { Component } from 'react';
import { Text, View,StyleSheet,TouchableOpacity,TextInput,FlatList,ListItem } from 'react-native';
import { Alert,Input } from 'native-base';
import {BoxShadow} from 'react-native-shadow';
import Dimensions from 'Dimensions';
import Icon from 'native-base';
const DEVICE_WIDTH = Dimensions.get('window').width;
export default class ticketDiaryHours1 extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
textOpombe: '',
data: [
{key: 'Devin Dank'},
{key: 'Jackson Will'},
{key: 'James Jones'},
{key: 'Joel Noah'},
{key: 'John Degenkolb'},
{key: 'Jillian Calmejain'},
{key: 'Jimmy Butler'},
{key: 'Julie Hell'},
],
showList: false,
}
}
onShowStudent() {
if(this.state.showList) {
this.setState({
showList: false,
});
} else {
this.setState({
showList: true,
});
}
}
render() {
const shadowOpt = {
height:40,
width: DEVICE_WIDTH-40,
color:"#000",
border:2,
radius:8,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:3}
};
const {
student,
startTime,
endTime,
headingText,
roomText,
apsent,
finished
} = this.props;
return (
<View style={styles.main}>
<Text>{startTime} - {endTime}</Text>
<Text style={styles.headingText}>{headingText} - {student}</Text>
<Text style={styles.hourContent}>VSEBINA URE </Text>
<BoxShadow setting={shadowOpt}>
<TextInput
style={styles.textInputStyle}
placeholder='Vnesite vsebino ure'
placeholderTextColor="rgba(0,0,0,0.5)"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
underlineColorAndroid='transparent'
/>
</BoxShadow>
<Text style={styles.hourContent}>OPOMBE </Text>
<BoxShadow setting={shadowOpt}>
<TextInput
style={styles.textInputStyle}
placeholder='Vnesite opombe'
placeholderTextColor="rgba(0,0,0,0.5)"
onChangeText={(textOpombe) => this.setState({textOpombe})}
value={this.state.textOpombe}
underlineColorAndroid='transparent'
/>
</BoxShadow>
<View style={styles.markedRow}>
<View style={{flexDirection: 'column', justifyContent: 'center', justifyContent: 'flex-start' }}>
<Text style={styles.textIcon}>OPRAVLJENO</Text>
<TouchableOpacity
style={ [styles.touchable1, styles.iconStyle] }
onPress={this.onShowStudent.bind(this)}>
<Icon name='checkmark' style={{color: '#fff', fontSize: 20, alignSelf: 'center' }}/>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'column', justifyContent: 'center', position: 'absolute', right: 0, top: 15 }}>
<Text style={styles.textIcon}>NEOPRAVLJENO</Text>
<TouchableOpacity
style={ [styles.touchable2, styles.iconStyle] }
onPress={this.onShowStudent.bind(this)}>
<Icon name='close'
style={{color: '#fff', fontSize: 20,alignSelf: 'center'}} />
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main: {
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'column',
paddingTop: 15
},
headingText: {
fontWeight: '400',
color: '#000000',
fontSize: 20,
},
hourContent: {
fontWeight: '400',
color: '#000000',
fontSize: 20,
paddingBottom: 15,
paddingTop: 15,
},
textInputStyle: {
backgroundColor: 'white',
paddingLeft: 10,
height: 40,
borderRadius: 8,
width: DEVICE_WIDTH-40,
},
markedRow: {
flexDirection: 'row',
paddingTop: 15,
},
touchable1: {
backgroundColor: '#48BFD3',
justifyContent: 'center',
},
touchable2: {
backgroundColor: '#EE9CA0',
justifyContent: 'center',
},
iconStyle: {
borderRadius: 8,
width: 50,
height: 40,
alignSelf: 'center',
},
textIcon: {
paddingBottom: 10,
fontWeight: '400',
color: '#000000',
fontSize: 20,
},
listItemStyle: {
flexDirection: 'row',
}
});
解决方案
那是您的导入问题。试试import {Icon} from 'native-base';
。这是一个成员导入(名为 import)。成员进口是出口export...
和不出口export default ...
推荐阅读
- python - 我应该如何更改由 diff() 产生的单元格?
- ssl - Chrome ERR_BAD_SSL_CLIENT_AUTH_CERT
- reactjs - 在类组件中反应 useLayoutEffect 等效项
- ruby - 如何使用 Selenium WebDriver 在 Firefox 中使用代理
- kubernetes - 如何在 pod 中获取集群 CIDR?
- python - 我将如何使用 for 循环将数字列表显示为输出?
- selenium - 无法脱离 if 条件并且无法单击元素
- react-redux - React - 无法在钩子组件中调度动作
- javascript - 使用 addEvent 添加的事件,不要采用其资源的颜色
- sharepoint - 数据工厂帮助:sharepoint 中的 CSV 文件