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;
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.