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

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

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

Я начал учиться реагировать на нативный 4-5 дней назад, и сейчас я создаю экран входа в 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>
      );
    };

Ответы [ 2 ]

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

В вашем файле Login.js вы импортируете Button как объект.

Изменить следующим образом:

От 

import { Button }  from '../components/Button';

К 

import Button from '../components/Button';

Для получения дополнительной информации, пожалуйста, взгляните: Uncaught Ошибка: Инвариантное Нарушение: Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию, но получил: объект

Надеюсь, это поможет!

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

Мне кажется, проблема в том, как вы экспортировали компонент 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 }) =>

для более подробной информации проверьте это Подробнее

...