React Native 如何做轮播图 react-native-swiper
//:仿饿了么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的更多相关文章
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 用avalon框架怎么做轮播图?
avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...
- jQuery做轮播图
这是我自己做的一个简单的轮播图,效果图如下: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制的.上面这个我自己做的,是搭好的一个结构,在无序列表中插入需要的图片.然后在插入图片的后面添加 ...
- tab切换里面做轮播图
这里的轮播图有三页,并且每页的数据有8个,只能将23个数据分割开来,这里要实现5个tab用一个轮播图 <div class="report_detail_class"> ...
- H5制作显示轮播图的方法Swiper
1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...
- React 轮播图实现
接到项目, 用react和material-ui实现轮播图. 搜索了一些方法参考, 不论语言/框架的使用,大体上分为两种思路 超宽列表实现法 在原生JS或者JQuery中,轮播图的实现一般是这样子的 ...
随机推荐
- java.lang.ClassCastException: java.math.BigDecimal cannot be cast to java.lang.String错误的解决方法
mmobjectid是在Oracle数据库中对应的是Number类型的,在JavaBean中定义的是Long类型的. List<BigDecimal> mmobjidAllFromMars ...
- charles撰写工具/compose和Compose New
撰写工具/compose和Compose New compose 是在原有的请求基础上,修改: compose New 是新出一个弹窗,自己手动一个个的去写: 可以写各种状态:– URL:– Meth ...
- jsp链接orcl
自己整的!好用滴!!希望能帮到一些初学者! package lobsterwwww; import java.sql.Connection; import java.sql.DriverManager ...
- salesforce 零基础学习(七十)使用jquery tree实现树形结构模式
项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...
- js便签笔记(9)——解读jquery源码时记录的一些知识点
近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...
- 在Hadoop 2.3上运行C++程序各种疑难杂症(Hadoop Pipes选择、错误集锦、Hadoop2.3编译等)
首记 感觉Hadoop是一个坑,打着大数据最佳解决方案的旗帜到处坑害良民.记得以前看过一篇文章,说1TB以下的数据就不要用Hadoop了,体现不 出太大的优势,有时候反而会成为累赘.因此Hadoop的 ...
- MySQL Replication 详解MySQL数据库设置主从同步的方法
MySQL同步的流程大致如下: 1.主服务器(master)将变更事件(更新.删除.表结构改变等等)写入二进制日志(master log). 2.从服务器(slave)的IO线程从主服务器(binl ...
- Linux下Nginx访问web目录提示403Forbidden
在Linux下http服务器nginx时,访问web目录提示403 Forbidden,首先需要了解nginx出现403错误是什么意思: 403 Forbidden表示你在请求一个资源文件但是ngin ...
- 精读JavaScript模式(二)
我在想知识点怎么去分类,原本计划一章节一篇,但这样会会显得长短不一.更主要的是看到哪写的哪更为随意.那么这一篇还是紧接第一篇进行知识梳理,上篇说到了更优化的for循环,现在继续聊聊其它的循环方式. 1 ...
- JVM学习记录-线程安全与锁优化(二)
前言 高效并发是程序员们写代码时一直所追求的,HotSpot虚拟机开发团队也为此付出了很多努力,为了在线程之间更高效地共享数据,以及解决竞争问题,HotSpot开发团队做出了各种锁的优化技术常见的有: ...

