---

---

//:仿饿了么github:https://github.com/stoneWeb/elm-react-native

欢迎各位同学加入：
React-Native群：397885169
大前端群：544587175
大神超多，热情无私帮助解决各种问题。

最近项目需求需要用到轮播图，所以写两Demo练练手，不过效果不太理想，希望大牛予以指正。

不多说，先上图。

这种轮播很常见，但是一个问题是，总感觉有点卡的感觉，最气人的是，你滑动到哪里，他就听到哪里，给用户感觉很不爽！

下面我分享一下该轮播的代码！

//import liraries
import React, { Component } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, ScrollView } from 'react-native'; import Swiper from 'react-native-swiper'; let { width, height } = Dimensions.get('window'); let Images = [ { src: require('../assets/images/1.jpg') }, { src: require('../assets/images/2.jpg') }, { src: require('../assets/images/3.jpg') }, { src: require('../assets/images/4.jpg') } ]; const loading = require('../assets/images/loading.gif'); // create a component
class TargetView extends Component { static navigationOptions = { title: '目标', headerStyle: { backgroundColor: '#FF3344', }, } _renderSwiper() { return ( <Swiper style={styles.swiperStyle} height={200} horizontal={true} autolay={true} loop={true} paginationStyle={{ bottom: 10 }} showsPagination={true} index={0} dotStyle={{ backgroundColor: 'rgba(0,0,0,.2)', width: 6, height: 6 }} activeDotStyle={{ backgroundColor: 'rgba(0,0,0,.5)', width: 6, height: 6 }}>
                <View style={styles.swiperItem}>
                    <Image style={styles.imageStyle} source={Images[0].src}></Image>
                </View>
                <View style={styles.swiperItem}>
                    <Image style={styles.imageStyle} source={Images[1].src}></Image>
                </View>
                <View style={styles.swiperItem}>
                    <Image style={styles.imageStyle} source={Images[2].src}></Image>
                </View>
                <View style={styles.swiperItem}>
                    <Image style={styles.imageStyle} source={Images[3].src}></Image>
                </View>
            </Swiper> ) } render() { return ( <ScrollView style={styles.container}> {this._renderSwiper()} </ScrollView> ); } } // define your styles
const styles = StyleSheet.create({ container: { flex: 1 }, swiperStyle: { marginTop:10, width: width, }, swiperItem: { flex: 1, justifyContent: 'center', backgroundColor: 'transparent', }, imageStyle: { flex: 1, width:width, }, }); //make this component available to the app
export default TargetView;

第二个情况，先上一张图

都看到这是仿饿了么的轮播效果，但情况依然很不爽，大牛给出点优化建议啊！

下面我分享一下该轮播的效果，（如果你正在做轮播，做的比较好，谢谢分享我一下，本人虚心学习，微信：jkxx123321）

//import liraries
import React, { Component } from 'react'; import { View, Text, StyleSheet, Dimensions, Image, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, ScrollView, Platform, Animated, } from 'react-native'; import Swiper from 'react-native-swiper'; import px2pd from '../utils/px2dp'; let { width, height } = Dimensions.get('window'); const isIOS = Platform.OS == 'ios'; const headH = px2pd(isIOS ? 140 : 120); const inputHeight = px2pd(28); const imgTypes = [ { src: require('../assets/images/1.jpg') }, { src: require('../assets/images/2.jpg') }, { src: require('../assets/images/3.jpg') }, { src: require('../assets/images/4.jpg') }, { src: require('../assets/images/4.jpg') }, { src: require('../assets/images/1.jpg') }, { src: require('../assets/images/2.jpg') }, { src: require('../assets/images/3.jpg') }, { src: require('../assets/images/4.jpg') }, { src: require('../assets/images/4.jpg') }, { src: requ