Нарушение инварианта: недопустимый тип элемента: - PullRequest
Новая
       5

Нарушение инварианта: недопустимый тип элемента:

0 голосов
/ 29 августа 2018

Здравствуйте, я столкнулся с этой проблемой при создании компонента кнопки здесь ошибка:

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.

Вот логин, файл кода 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;

Что мне не хватает? Fuction?

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Вы сделали export default Button. Так что ниже должен быть в вашем коде 

import Button from './components/button';

В файле button.js не было названных импортов. Так, { Button }, делает Button как undefined .

0 голосов
/ 29 августа 2018

Вы использовали значение по умолчанию, тогда оно просто пытается деструктурировать функцию / класс 

import Button from './components/button';

Сделай так. Вот так мы импортируем экспорт по умолчанию из других компонентов

0 голосов
/ 29 августа 2018

Вам необходимо импортировать кнопку как

import Button from './components/button', поскольку он был экспортирован как экспорт по умолчанию

или кнопка экспорта в виде имени экспорта

...