myths-Mac:JdApp myth$ yarn add react-native-swiper
import React,{ Component } from 'react';@H_404_2@import {@H_404_2@ StyleSheet,@H_404_2@ Text,@H_404_2@ View@H_404_2@} from 'react-native';@H_404_2@import Header from './Header';@H_404_2@import HomePage from './home/HomePage';@H_404_2@@H_404_2@export default class App extends Component {@H_404_2@ render() {@H_404_2@ return (@H_404_2@ <View style={styles.container}>@H_404_2@ <Header/>@H_404_2@ <HomePage/>@H_404_2@ </View>@H_404_2@ );@H_404_2@ }@H_404_2@}@H_404_2@@H_404_2@const styles = StyleSheet.create({@H_404_2@ container: {@H_404_2@ flex: 1,@H_404_2@ },@H_404_2@
});
@H_404_2@
import React,@H_404_2@ View,@H_404_2@ Image,@H_404_2@ Dimensions,@H_404_2@ ScrollView,@H_404_2@ ListView@H_404_2@} from 'react-native';@H_404_2@import Swiper from 'react-native-swiper';@H_404_2@const {width} = Dimensions.get('window');@H_404_2@export default class HomePage extends Component {@H_404_2@ constructor(props){@H_404_2@ super(props)@H_404_2@ this.state = {@H_404_2@ apiData: [@H_404_2@ {id:1,swiperText:'499¥ 限量抢购真八核 腾讯雷霆手机',imageUri: 'http://localhost:8081/images/banner/1.jpg'},@H_404_2@ {id:2,swiperText:'购趣洗手液 赢迪士尼之旅 满88元减22元 满188元减66元',imageUri: 'http://localhost:8081/images/banner/2.jpg'},@H_404_2@ {id:3,swiperText:'潮流焕新季 炫品抄底 3月大促销第三波 时间3月16日~22日',imageUri: 'http://localhost:8081/images/banner/3.jpg'},@H_404_2@ {id:4,swiperText:'三月女人节 春装新品 折后满减 倒数计时',imageUri: 'http://localhost:8081/images/banner/4.jpg'}@H_404_2@ ]}@H_404_2@ this.id = null;@H_404_2@ this.swiperText = null;@H_404_2@ this.imageUri = null;@H_404_2@ }@H_404_2@ render() {@H_404_2@ const data = this.state.apiData;@H_404_2@ let dataDisplay = data.map(function(jsonData){@H_404_2@ return (@H_404_2@ <View key={jsonData.id} style={styles.slide} >@H_404_2@ <Text numberOfLines={1}>{jsonData.swiperText}</Text>@H_404_2@ <Image resizeMode='stretch' style={styles.image} source={{uri: jsonData.imageUri}} />@H_404_2@ </View>@H_404_2@ )@H_404_2@ });@H_404_2@ return(@H_404_2@ <View style={{flex: 1}}>@H_404_2@ <ScrollView style={styles.container}>@H_404_2@ <Swiper style={styles.wrapper} height={140} autoplay@H_404_2@ onMomentumScrollEnd={(e,state,context) => console.log('index:',state.index)}@H_404_2@ dot={<View style={{backgroundColor:'rgba(0,.3)',width: 6,height: 6,borderRadius: 3,margin: 5 }} />}@H_404_2@ activeDot={<View style={{backgroundColor:'red',margin: 5 }} />}@H_404_2@ paginationStyle={{bottom: 0}} loop>@H_404_2@ {dataDisplay}@H_404_2@ </Swiper>@H_404_2@ </ScrollView>@H_404_2@ </View>@H_404_2@ );@H_404_2@ }@H_404_2@}@H_404_2@@H_404_2@const styles = StyleSheet.create({@H_404_2@ container: {@H_404_2@ flex: 1,@H_404_2@ wrapper: {@H_404_2@@H_404_2@ },@H_404_2@ slide: {@H_404_2@ justifyContent: 'center',@H_404_2@ backgroundColor: 'transparent'@H_404_2@ },@H_404_2@ image: {@H_404_2@ width:width,@H_404_2@ height: 130,@H_404_2@});@H_404_2@
安卓和苹果模拟器里最终运行的视频效果如下：
