Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция… — REACT NATIVE

#react-native

#реагировать-родной

Вопрос:

Я получил эту ошибку во время работы над моим Content.js файл: До этого все было хорошо, так что я знаю, что это не App.js или другой файл. Я попробовал ‘npm install’ на всякий случай… Большинство людей в Интернете, которые столкнулись с подобными ошибками, упоминают, что это может быть связано со способом экспорта компонента, но я уже изменил его на «экспортировать содержимое класса по умолчанию, расширяющее компонент», как и предлагало большинство людей.

Ошибка

Это файл:

Content.js

 import React, { Component } from "react";
import { StyleSheet, View, ActivityIndicator, ScrollView, Card, Text} from 'react-native';
import firebase from '../../firebase';

export default class Content extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
      article: {},
      key: ''
    };
  }
  componentDidMount() {
    const ref = firebase.firestore().collection('articles').doc('foo');
    ref.get().then((doc) => {
      if (doc.exists) {
        this.setState({
          article: doc.data(),
          key: doc.id,
          isLoading: false
        });
      } else {
        console.log("No such document!");
      }
    });
  }

  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.activity}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      )
    }
    return (
      <ScrollView>
        <Card style={styles.container}>
          <View style={styles.subContainer}>
            <View>
              <Text h3>{this.state.article.title}</Text>
            </View>
            <View>
              <Text h5>{this.state.article.content}</Text>
            </View>
          </View>
        </Card>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  },
  activity: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
})
  

Комментарии:

1. А вы import React, { Component } from 'react' ?

2. Как вы импортируете Content в другие файлы?

3. @SaachiTech В моем App.js где навигация, я импортирую ее следующим образом: импортируйте содержимое из ‘./src/screens /Content’;

4. @FredAstaire да, извините, эта строка не была скопирована: импортируйте React, { Component } из «react»;

Ответ №1:

Вы импортировали карту из react-native, но React native не предоставляет встроенного компонента карты.

Комментарии:

1. Вы абсолютно правы! Как глупо с моей стороны, большое спасибо! Это исправлено!