FEHLER - Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten)

Question

Seltsame Fehlermeldung wird angezeigt, während ich eines meiner React Native-Projekte entwickle. enter image description here

Folgendes ist der Code, den ich verwende;

import React, {Component} from 'react'; 
    import {Text, View, Image, StyleSheet} from 'react-native'; 
    import {Content, Container} from 'native-base'; 
    import {Carousel} from 'react-native-looped-carousel'; 

    export default class AppBody extends Component { 
     render() { 
     return (
      <Container> 
      <Content> 
       <Carousel delay={500}> 
       <View style={[{ 
        backgroundColor: '#BADA55' 
        } 
       ]}/> 
       <View style={[{ 
        backgroundColor: 'red' 
        } 
       ]}/> 
       <View style={[{ 
        backgroundColor: 'blue' 
        } 
       ]}/> 
       </Carousel> 
      </Content> 
      </Container> 
     ); 
     } 
    } 

    module.export = AppBody; 

Answer 1

Ihre import von react-native-looped-carousel ist falsch:

import Carousel from 'react-native-looped-carousel' 

Nach dem Fixieren, dass wird das Karussell nicht funktionieren. Denn Sie sollten Abmessungen dafür angeben:

import React, { Component } from 'react' 
import { Text, View, Image, StyleSheet, Dimensions } from 'react-native' 
import { Content, Container } from 'native-base' 
import Carousel from 'react-native-looped-carousel' 

const {width, height} = Dimensions.get('window') 
export default class AppBody extends Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     size: {width, height}, 
    } 
    } 

    render() { 
    return (
     <Container> 
     <Content> 
      <Carousel 
      delay={2000} 
      style={this.state.size} 
      autoplay 
      pageInfo 
      onAnimateNextPage={(p) => console.log(p)} 
      > 
      <View style={[{backgroundColor: '#BADA55'}, this.state.size]}><Text>1</Text></View> 
      <View style={[{backgroundColor: 'red'}, this.state.size]}><Text>2</Text></View> 
      <View style={[{backgroundColor: 'blue'}, this.state.size]}><Text>3</Text></View> 
      </Carousel> 
     </Content> 
     </Container> 
    ) 
    } 
} 

module.export = AppBody