错误-元素类型无效：预期为字符串（对于内置组件）

Question

Strange error is appearing while developing one of my React Native project. enter image description here

Following is the code I am using;

    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

Your import from react-native-looped-carousel is incorrect:

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

After fixing that, the carousel won't work. Because you should provide dimensions for it:

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