J'ai eu cette erreur en travaillant sur mon fichier Content.js : Avant cela, tout allait bien, donc je sais que ce n'est pas App.js ou un autre fichier. J'ai essayé "npm install" juste au cas où... La plupart des personnes en ligne qui ont rencontré des erreurs similaires mentionnent que cela pourrait avoir à voir avec la façon dont le composant est exporté, mais je l'ai déjà changé en "exporter la classe par défaut Le contenu étend le composant" juste comme la plupart des gens l'ont suggéré.

Error

Voici le fichier:

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'
  },
})
0
cldev 16 sept. 2020 à 19:24

1 réponse

Meilleure réponse

Vous avez importé Card depuis le natif de réaction, mais le natif de React ne fournit pas de composant de carte intégré.

1
Amit Khatkar 16 sept. 2020 à 16:50