React Native 如何做轮播图 react-native-swiper

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

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

不多说，先上图。@H_403_5@

@H_403_5@

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

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

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

第二个情况，先上一张图@H_403_5@

@H_403_5@

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

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

//@H_403_5@import liraries@H_403_5@
import React,TouchableNativeFeedback,TouchableWithoutFeedback,ScrollView,Platform,Animated,} @H_403_5@from@H_403_5@ '@H_403_5@react-native@H_403_5@'@H_403_5@; import Swiper @H_403_5@from@H_403_5@ '@H_403_5@react-native-swiper@H_403_5@'@H_403_5@; import px2pd @H_403_5@from@H_403_5@ '@H_403_5@../utils/px2dp@H_403_5@'@H_403_5@; let { width,height } @H_403_5@= Dimensions.get@H_403_5@('@H_403_5@window@H_403_5@'@H_403_5@); @H_403_5@const@H_403_5@ isIOS = Platform.OS == '@H_403_5@ios@H_403_5@'@H_403_5@; @H_403_5@const@H_403_5@ headH = px2pd(isIOS ? 140@H_403_5@ : 120@H_403_5@); @H_403_5@const@H_403_5@ inputHeight = px2pd(28@H_403_5@); @H_403_5@const@H_403_5@ imgTypes = [ { src: require(@H_403_5@'@H_403_5@../assets/images/1.jpg@H_403_5@'@H_403_5@) },{ src: require(@H_403_5@'@H_403_5@../assets/images/4.jpg@H_403_5@'@H_403_5@) },{ src: require(@H_403_5@'@H_403_5@../assets/images/1.jpg@H_403_5@'@H_403_5@) },} constructor(props) { super(props) @H_403_5@this@H_403_5@.state = { location: @H_403_5@"@H_403_5@联锦大厦@H_403_5@"@H_403_5@,} } _renderHeader() { @H_403_5@return@H_403_5@ ( @H_403_5@<View style={styles.header}> {@H_403_5@/*@H_403_5@定位、天气@H_403_5@*/@H_403_5@} @H_403_5@<View style={styles.lbsWeather}>
                    <TouchableWithoutFeedback>
                        <View style={styles.lbs}>
                            <Image source={require('@H_403_5@../assets/icons/search.png@H_403_5@'@H_403_5@)} style={{ width: px2pd(18@H_403_5@),height: px2pd(18@H_403_5@) }}></Image>
                            <Text style={{ fontSize: px2pd(16@H_403_5@),fontWeight: '@H_403_5@bold@H_403_5@'@H_403_5@,color: '@H_403_5@#fff@H_403_5@'@H_403_5@,paddingHorizontal: px2pd(5@H_403_5@) }}>{this@H_403_5@.state.location}</Text>
                            <Image source={require('@H_403_5@../assets/icons/search.png@H_403_5@'@H_403_5@)} style={{ width: px2pd(16@H_403_5@),height: px2pd(16@H_403_5@) }}></Image>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={styles.weather}>
                        <View style={{ marginRight: px2pd(5@H_403_5@) }}>
                            <Text style={{ fontSize: px2pd(11@H_403_5@),textAlign: '@H_403_5@center@H_403_5@'@H_403_5@ }}>{'@H_403_5@20℃@H_403_5@'@H_403_5@}</Text>
                            <Text style={{ fontSize: px2pd(11@H_403_5@),color: '@H_403_5@#fff@H_403_5@'@H_403_5@ }}>{'@H_403_5@晴天@H_403_5@'@H_403_5@}</Text>
                        </View>
                        <Image source={require('@H_403_5@../assets/icons/search.png@H_403_5@'@H_403_5@)} style={{ width: px2pd(20@H_403_5@),height: px2pd(20@H_403_5@) }}></Image>
                    </View>
                </View> {@H_403_5@/*@H_403_5@搜索框@H_403_5@*/@H_403_5@} @H_403_5@<View style={{ marginTop: px2pd(@H_403_5@15@H_403_5@),}}@H_403_5@>
                    <TouchableWithoutFeedback onPress={() => { }}>
                        <View style={styles.searchBtn}>
                            <Image source={require('@H_403_5@../assets/icons/search.png@H_403_5@'@H_403_5@)} style={{ width: px2pd(20@H_403_5@),height: px2pd(20@H_403_5@) }}></Image>
                            <Text style={{ fontSize: px2pd(13@H_403_5@),color: '@H_403_5@#666@H_403_5@'@H_403_5@,marginLeft: px2pd(15@H_403_5@) }}>{'@H_403_5@输入商家，商品名称@H_403_5@'@H_403_5@}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
                <Animated.View style={styles.keywords}> { [@H_403_5@'@H_403_5@肯德基@H_403_5@'@H_403_5@,'@H_403_5@烤肉@H_403_5@'@H_403_5@,'@H_403_5@吉野家@H_403_5@'@H_403_5@,'@H_403_5@粥@H_403_5@'@H_403_5@,'@H_403_5@必胜客@H_403_5@'@H_403_5@,'@H_403_5@一品生煎@H_403_5@'@H_403_5@,'@H_403_5@星巴克@H_403_5@'@H_403_5@].map((item,i) => { @H_403_5@return@H_403_5@ ( @H_403_5@<TouchableWithoutFeedback key={i}>
                                    <View style={{ marginRight: px2pd(12@H_403_5@) }}>
                                        <Text style={{ fontSize: px2pd(12@H_403_5@),color: '@H_403_5@#fff@H_403_5@'@H_403_5@ }}>{item}</Text>
                                    </View>
                                </TouchableWithoutFeedback> ) }) } @H_403_5@</Animated.View>
            </View> ) } _renderTypes() { @H_403_5@const@H_403_5@ w = width / 4@H_403_5@,h = w * .6@H_403_5@ + 20@H_403_5@; let renderSwipeView @H_403_5@= (types,n) => { @H_403_5@return@H_403_5@ ( @H_403_5@<View style={styles.typesView}> { types.map((item,i) @H_403_5@=> { let render @H_403_5@= ( @H_403_5@<View style={[{ width: w,height: h },styles.typesItem]}>
                                    <Image source={imgTypes[n + i].src} style={{ width: w * .5@H_403_5@,height: w * .5@H_403_5@ }} />
                                    <Text style={{ fontSize: px2pd(12@H_403_5@),color: "@H_403_5@#666@H_403_5@"@H_403_5@ }}>{item}</Text>
                                </View> ) @H_403_5@return@H_403_5@ ( isIOS @H_403_5@? ( @H_403_5@<TouchableHighlight style={{ width: w,height: h }} key={i} onPress={() => { }}>{render}</TouchableHighlight> ) : ( @H_403_5@<TouchableNativeFeedback style={{ width: w,height: h }} key={i} onPress={() => { }}>{render}</TouchableNativeFeedback> ) ) }) } @H_403_5@</View> ) } @H_403_5@return@H_403_5@ ( @H_403_5@<Swiper height@H_403_5@={h * 2.4@H_403_5@} paginationStyle@H_403_5@={{ bottom: 10@H_403_5@ }} dotStyle@H_403_5@={{ backgroundColor: '@H_403_5@rgba(0,height: 6@H_403_5@ }}> {renderSwipeView([@H_403_5@'@H_403_5@美食@H_403_5@'@H_403_5@,'@H_403_5@甜品饮品@H_403_5@'@H_403_5@,'@H_403_5@商店超市@H_403_5@'@H_403_5@,'@H_403_5@预定早餐@H_403_5@'@H_403_5@,'@H_403_5@果蔬生鲜@H_403_5@'@H_403_5@,'@H_403_5@新店特惠@H_403_5@'@H_403_5@,'@H_403_5@准时达@H_403_5@'@H_403_5@,'@H_403_5@高铁订餐@H_403_5@'@H_403_5@],0@H_403_5@)} {renderSwipeView([@H_403_5@'@H_403_5@土豪推荐@H_403_5@'@H_403_5@,'@H_403_5@鲜花蛋糕@H_403_5@'@H_403_5@,'@H_403_5@汉堡炸鸡@H_403_5@'@H_403_5@,'@H_403_5@日韩料理@H_403_5@'@H_403_5@,'@H_403_5@麻辣烫@H_403_5@'@H_403_5@,'@H_403_5@披萨意面@H_403_5@'@H_403_5@,'@H_403_5@川湘菜@H_403_5@'@H_403_5@,'@H_403_5@包子粥店@H_403_5@'@H_403_5@],8@H_403_5@)} @H_403_5@</Swiper> ) } render() { @H_403_5@return@H_403_5@ ( @H_403_5@<View style={styles.container}>
                <ScrollView style={styles.scrollView}> {@H_403_5@this@H_403_5@._renderHeader()} @H_403_5@<View style={{ backgroundColor: "@H_403_5@#fff@H_403_5@"@H_403_5@,paddingBottom: px2pd(10@H_403_5@) }}> {@H_403_5@this@H_403_5@._renderTypes()} @H_403_5@</View>
                </ScrollView>
            </View> ); } } @H_403_5@//@H_403_5@ define your styles@H_403_5@
const@H_403_5@ styles = StyleSheet.create({ container: { flex: @H_403_5@1@H_403_5@,backgroundColor: @H_403_5@'@H_403_5@#f3f3f3@H_403_5@'@H_403_5@,scrollView: { marginBottom: px2pd(@H_403_5@46@H_403_5@),header: { backgroundColor: @H_403_5@'@H_403_5@#0398ff@H_403_5@'@H_403_5@,height: headH,paddingTop: px2pd(isIOS @H_403_5@? 30@H_403_5@ : 10@H_403_5@),paddingHorizontal: @H_403_5@16@H_403_5@,lbsWeather: { height: inputHeight,overflow: @H_403_5@"@H_403_5@hidden@H_403_5@"@H_403_5@,flexDirection: @H_403_5@'@H_403_5@row@H_403_5@'@H_403_5@,justifyContent: @H_403_5@'@H_403_5@space-between@H_403_5@'@H_403_5@,lbs: { flexDirection: @H_403_5@'@H_403_5@row@H_403_5@'@H_403_5@,alignItems: @H_403_5@'@H_403_5@center@H_403_5@'@H_403_5@,weather: { flexDirection: @H_403_5@'@H_403_5@row@H_403_5@'@H_403_5@,searchBtn: { borderRadius: inputHeight,height: inputHeight,backgroundColor: @H_403_5@'@H_403_5@#fff@H_403_5@'@H_403_5@,keywords: { marginTop: px2pd(@H_403_5@14@H_403_5@),typesView: { paddingBottom: px2pd(@H_403_5@10@H_403_5@),flex: @H_403_5@1@H_403_5@,backgroundColor: @H_403_5@"@H_403_5@#fff@H_403_5@"@H_403_5@,flexDirection: @H_403_5@"@H_403_5@row@H_403_5@"@H_403_5@,flexWrap: @H_403_5@"@H_403_5@wrap@H_403_5@"@H_403_5@ },typesItem: { backgroundColor: @H_403_5@'@H_403_5@#fff@H_403_5@'@H_403_5@,alignItems: @H_403_5@'@H_403_5@center@H_403_5@'@H_403_5@ },}); @H_403_5@//@H_403_5@make this component available to the app@H_403_5@
export default@H_403_5@ TargetView;
 @H_403_5@//@H_403_5@---------------------px2dp.js------------------------------@H_403_5@// @H_403_5@ import { Dimensions } @H_403_5@from@H_403_5@ '@H_403_5@react-native@H_403_5@'@H_403_5@

const@H_403_5@ deviceH = Dimensions.get@H_403_5@('@H_403_5@window@H_403_5@'@H_403_5@).height @H_403_5@const@H_403_5@ deviceW = Dimensions.get@H_403_5@('@H_403_5@window@H_403_5@'@H_403_5@).width @H_403_5@const@H_403_5@ basePx = 375@H_403_5@ export @H_403_5@default@H_403_5@ function px2dp(px) { @H_403_5@return@H_403_5@ px * deviceW / basePx }@H_403_5@@H_403_5@

附一张属性表：@H_403_5@

3.1 基本属性@H_403_5@

@H_403_5@

Prop @H_403_5@	Default@H_403_5@	Type@H_403_5@	Description@H_403_5@
horizontal@H_403_5@	true@H_403_5@	bool@H_403_5@	如果值为true时，那么滚动的内容将是横向排列的，而不是垂直于列中的。@H_403_5@
loop@H_403_5@	true@H_403_5@	bool@H_403_5@	如果设置为false，那么滑动到最后一张时，再次滑动将不会展示第一张图片。@H_403_5@
index@H_403_5@	0@H_403_5@	number@H_403_5@	初始进入的页面标识为0的页面。@H_403_5@
showsButtons@H_403_5@	false@H_403_5@	bool@H_403_5@	如果设置为true，那么就可以使控制按钮（即：左右两侧的箭头）可见。@H_403_5@
autoplay@H_403_5@	false@H_403_5@	bool@H_403_5@	设置为true，则页面可以自动跳转。@H_403_5@

3.2 自定义 属性@H_403_5@

@H_403_5@

Prop@H_403_5@	Default@H_403_5@	Type@H_403_5@	Description@H_403_5@
width@H_403_5@	-@H_403_5@	number@H_403_5@	如果你没有特殊的设置，就通过flex:1默认为全屏。@H_403_5@
height@H_403_5@	-@H_403_5@	number@H_403_5@	如果你没有特殊的设置，就通过flex:1默认为全屏。@H_403_5@
style@H_403_5@	{...}@H_403_5@	style@H_403_5@	设置页面的样式。@H_403_5@

3.3 pagination 分页@H_403_5@

@H_403_5@

Prop@H_403_5@	Default@H_403_5@	Type@H_403_5@	Description@H_403_5@
showsPagination@H_403_5@	true@H_403_5@	bool@H_403_5@	默认值为true，在页面下边显示圆点，以标明当前页面位于第几个。@H_403_5@
paginationStyle@H_403_5@	{...}@H_403_5@	style@H_403_5@	设置页面原点的样式，自定义的样式会和默认样式进行合并。@H_403_5@
renderPagination@H_403_5@	@H_403_5@	@H_403_5@	@H_403_5@
dot@H_403_5@	<View style={{backgroundColor:'rgba(0,.2)',width: 8,height: 8,borderRadius: 4,marginLeft: 3,marginRight: 3,marginTop: 3,marginBottom: 3,}} />@H_403_5@	element@H_403_5@	可以自定义不是当前圆点的样式@H_403_5@
activeDot@H_403_5@	<View style={{backgroundColor: '#007aff',}} />@H_403_5@	element@H_403_5@	可以自定义当前页面圆点的样式@H_403_5@

3.4 自动播放@H_403_5@

@H_403_5@

Prop@H_403_5@	Default@H_403_5@	Type@H_403_5@	Description@H_403_5@
autoplay@H_403_5@	true@H_403_5@	`bool`@H_403_5@	设置为true可以使页面自动滑动。@H_403_5@
autoplayTimeout@H_403_5@	2.5@H_403_5@	`number`@H_403_5@	设置每个页面自动滑动停留的时间@H_403_5@
autoplayDirection@H_403_5@	true@H_403_5@	`bool`@H_403_5@	圆点的方向允许默认自己控制@H_403_5@

3.5 控制按钮@H_403_5@

@H_403_5@

Prop@H_403_5@	@H_403_5@	Default@H_403_5@	Type@H_403_5@	Description@H_403_5@
showsButtons@H_403_5@	@H_403_5@	true@H_403_5@	`bool`@H_403_5@	是否显示控制箭头按钮@H_403_5@
buttonWrapperStyle@H_403_5@	@H_403_5@	{position: 'absolute',paddingHorizontal: 15,paddingVertical: 30,top: 70,left: 0,alignItems:'flex-start'} @H_403_5@	`style`@H_403_5@	定义默认箭头按钮的样式@H_403_5@
nextButton@H_403_5@	@H_403_5@	<Text style={{fontSize:60,color:'#00a7ec',paddingTop:30,paddingBottom:30}}>‹</Text>@H_403_5@	`element`@H_403_5@	自定义右箭头按钮样式@H_403_5@
prevButton@H_403_5@	@H_403_5@	<Text style={{fontSize:60,paddingBottom:30}}>›</Text>@H_403_5@	`element`@H_403_5@	自定义左箭头按钮样式@H_403_5@

加油！@H_403_5@

React Native 如何做轮播图 react-native-swiper

3.1 基本属性@H_403_5@

3.2 自定义属性@H_403_5@

3.3 pagination 分页@H_403_5@

3.4 自动播放@H_403_5@

3.5 控制按钮@H_403_5@

猜你在找的React相关文章