import React,{PureComponent} from 'react';
import {View, Text,StyleSheet,Image,TouchableOpacity} from 'react-native';
import Swiper from 'react-native-swiper'
import px2dp , {Screen} from '../../Utils/px2dp'
class xxxxx extends PureComponent {
static defaultProps = {
imageArray :[]
}
render (){
let imageArray = this.props.imageArray;
// banner
return (
<View style={styles.wrapper} >
<Swiper autoplay={true}
height={px2dp(375) * 0.4}
autoplayTimeout = {2.5}
paginationStyle = {styles.paginationStyle}
dot = {<View style={{backgroundColor:'gray', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
>
//excutor four time
{imageArray.map((index,i) =>(
<TouchableOpacity style={{flex :1}} key = {i} onPress={ () =>this.props.onPressBanner(index)}>
<Image source={{uri : index.bannerUrl}} style={{width : px2dp(375),height : px2dp(375) * 0.4}} />
</TouchableOpacity>
))}
</Swiper>
</View>
)
}
}
const styles = StyleSheet.create({
wrapper : {
borderWidth : px2dp(0.5),
borderColor : '#e0e0e0',
},
paginationStyle : {
width : 100,height: 10,
alignSelf : 'center',
position : 'absolute',
top : px2dp(375) * 0.4 - 18,
left : px2dp(375) * 0.5 - 50
}
});
export default xxxxxx
{
"name": "xxxx",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"es6-symbol": "^3.1.1",
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-fetch-blob": "^0.10.8",
"react-native-img-cache": "^1.4.0",
"react-native-root-toast": "^1.1.2",
"react-native-scrollable-tab-view": "^0.6.7",
"react-native-swiper": "^1.5.7",
"react-native-tab-navigator": "^0.3.3",
"react-native-vector-icons": "^4.3.0",
"react-navigation": "^1.0.0-beta.11"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
I use swiper to display 4 image in iOS,i am setting autoplay = {ture} and autoplayTimeout = {2.5} ,but it does do once,it can't autoplay,i have no idea about it ,help me
@DevaLee i had the same issues too with react-native version 0.46.0, maybe your scenario is same with mine #467 , i fixed my issues after i updated react-native version to 0.47.0
take a look on here https://github.com/facebook/react-native/issues/9436
Is the bug persist on RN 0.47 and RN Swiper 1.5.9?
@arribbar im using 0.47.0 right now, everything work fine after i upgraded
If you still Have a Problem try
key={this.state.dynamicContent.length}
On the Swiper eg:
<Swiper style={styles.swiperStyle} autoplay={true} key={this.state.data.length}>
{newsItemsSwipe}
</Swiper>
Most helpful comment
If you still Have a Problem try
key={this.state.dynamicContent.length}On the Swiper eg:
<Swiper style={styles.swiperStyle} autoplay={true} key={this.state.data.length}> {newsItemsSwipe} </Swiper>