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

附一张属性表:

3.1 基本属性

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

3.2 自定义属性

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

3.3 pagination 分页

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

3.4 自动播放

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

3.5 控制按钮

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

加油!

React Native 如何做轮播图 react-native-swiper的更多相关文章

  1. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  2. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  3. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  4. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  5. 用avalon框架怎么做轮播图?

    avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...

  6. jQuery做轮播图

    这是我自己做的一个简单的轮播图,效果图如下: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制的.上面这个我自己做的,是搭好的一个结构,在无序列表中插入需要的图片.然后在插入图片的后面添加 ...

  7. tab切换里面做轮播图

    这里的轮播图有三页,并且每页的数据有8个,只能将23个数据分割开来,这里要实现5个tab用一个轮播图 <div class="report_detail_class"> ...

  8. H5制作显示轮播图的方法Swiper

    1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...

  9. React 轮播图实现

    接到项目, 用react和material-ui实现轮播图. 搜索了一些方法参考, 不论语言/框架的使用,大体上分为两种思路 超宽列表实现法 在原生JS或者JQuery中,轮播图的实现一般是这样子的 ...

随机推荐

  1. java.lang.ClassCastException: java.math.BigDecimal cannot be cast to java.lang.String错误的解决方法

    mmobjectid是在Oracle数据库中对应的是Number类型的,在JavaBean中定义的是Long类型的. List<BigDecimal> mmobjidAllFromMars ...

  2. charles撰写工具/compose和Compose New

    撰写工具/compose和Compose New compose 是在原有的请求基础上,修改: compose New 是新出一个弹窗,自己手动一个个的去写: 可以写各种状态:– URL:– Meth ...

  3. jsp链接orcl

    自己整的!好用滴!!希望能帮到一些初学者! package lobsterwwww; import java.sql.Connection; import java.sql.DriverManager ...

  4. salesforce 零基础学习(七十)使用jquery tree实现树形结构模式

    项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...

  5. js便签笔记(9)——解读jquery源码时记录的一些知识点

    近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...

  6. 在Hadoop 2.3上运行C++程序各种疑难杂症(Hadoop Pipes选择、错误集锦、Hadoop2.3编译等)

    首记 感觉Hadoop是一个坑,打着大数据最佳解决方案的旗帜到处坑害良民.记得以前看过一篇文章,说1TB以下的数据就不要用Hadoop了,体现不 出太大的优势,有时候反而会成为累赘.因此Hadoop的 ...

  7. MySQL Replication 详解MySQL数据库设置主从同步的方法

    MySQL同步的流程大致如下:  1.主服务器(master)将变更事件(更新.删除.表结构改变等等)写入二进制日志(master log). 2.从服务器(slave)的IO线程从主服务器(binl ...

  8. Linux下Nginx访问web目录提示403Forbidden

    在Linux下http服务器nginx时,访问web目录提示403 Forbidden,首先需要了解nginx出现403错误是什么意思: 403 Forbidden表示你在请求一个资源文件但是ngin ...

  9. 精读JavaScript模式(二)

    我在想知识点怎么去分类,原本计划一章节一篇,但这样会会显得长短不一.更主要的是看到哪写的哪更为随意.那么这一篇还是紧接第一篇进行知识梳理,上篇说到了更优化的for循环,现在继续聊聊其它的循环方式. 1 ...

  10. JVM学习记录-线程安全与锁优化(二)

    前言 高效并发是程序员们写代码时一直所追求的,HotSpot虚拟机开发团队也为此付出了很多努力,为了在线程之间更高效地共享数据,以及解决竞争问题,HotSpot开发团队做出了各种锁的优化技术常见的有: ...