2017-07-02 69 views
0

開發我的React Native項目之一時出現奇怪的錯誤。 enter image description here錯誤 - 元素類型無效:預期爲字符串(對於內置組件)

以下是我正在使用的代碼;

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; 

回答

0

importreact-native-looped-carousel是不正確的:

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

固定在此之後,傳送帶將無法正常工作。因爲你應該提供它的尺寸:

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 
+0

非常感謝你Maysam,這完美的作品。 –

相關問題