Question

我的应用程序中出现此错误：

不变违反：不变违反：元素类型无效：预期的字符串（用于内置组件）或类/函数（用于复合组件），但得到：未定义。您可能忘记了出口您的组件来自定义它的文件，或者您可能已经混合了设置默认名称并命名导入。

我不知道为什么会这样，因为我看不到任何问题。看看我的屏幕代码：

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',
    }

});

Answer 1

这是您导入的问题。尝试import {Icon} from 'native-base';。这是成员导入（名为导入）。成员导入使用export...而不是export default ...

导出

不变违规反应本机

1 个答案: