normal use of react-native-viewpager but error report, already install, I tried to introduce the place where there is a problem, as soon as I opened the introduction, I reported an error, what is the problem? The
code is as follows:
import React, { Component } from "react";
import {
StyleSheet,
Text,
Button,
Image,
Dimensions,
View
} from "react-native";
import ViewPager from "react-native-viewpager";
var { height, width } = Dimensions.get("window");
const IMGS = [
require("../images/banner.jpg"),
require("../images/banner1.jpg"),
require("../images/banner2.jpg")
]
export default class HomePage extends Component {
constructor(props){
super(props);
let ds = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2
});
this.state = {
data:ds.cloneWithPages(IMGS)
}
}
_renderPage(page) {
return (<Image source={page} />)
}
render() {
return (
<View style = {{ position: "relative" }} >
<View style = { styles.search } >
<Text > </Text>
</View>
<View style = { styles.header } >
<ViewPager
dataSource={this.state.data}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true} />
</View>
<View style = { styles.notice } >
<Text > </Text>
</View>
<View style = { styles.recommond } >
<Text > </Text>
</View>
<View style = { styles.products } >
<Text > </Text>
</View>
<Button title = "Go to Home"
onPress = {
() => this.props.navigation.navigate("Product") }
/>
</View>
)
}
}
const styles = StyleSheet.create({
search: {
width: width,
position: "absolute",
left: 0,
top: 20,
zIndex: 99,
height: 30,
backgroundColor: "rgba(255, 255, 255, .5)"
},
header: {
backgroundColor: "-sharpff4400"
},
notice: {
height: 50,
backgroundColor: "-sharpff4400"
},
recommond: {
height: 80,
backgroundColor: "-sharpff4400"
},
products: {
backgroundColor: "-sharpff4400"
}
}); error message:
