react native 中使用swiper
1.下载依赖
cnpm install react-native-swiper --save
2.在组件中使用
import React, { Component } from 'react';
import { StyleSheet, View,Dimensions,Image} from 'react-native';
import Swiper from 'react-native-swiper';
export default class SideItem extends Component {
render(){
return(
<View style={styles.container}>
<Swiper
style={styles.swiper}
height={220}
horizontal={true}
autoplay={true}
paginationStyle={{bottom: 20}}
showsButtons={false}>
<Image source={require('../assets/images/1.png')} style={styles.img}/>
<Image source={require('../assets/images/2.png')} style={styles.img}/>
<Image source={require('../assets/images/3.png')} style={styles.img}/>
</Swiper>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
swiper: {},
img: {
width: Dimensions.width,
height: 200,
}
});
3.运行run-Android

react native 中使用swiper的更多相关文章
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- react native中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- [No000015C]计算机科学关键领域
- A. Srdce and Triangle 几何题
链接:https://www.nowcoder.com/acm/contest/104/A来源:牛客网 题目描述 Let be a regualr triangle, and D is a poin ...
- gateone安装使用
下载地址 https://github.com/liftoff/GateOne unzip GateOne-master.zip cd GateOne-master/ python setup.py ...
- [nginx] 从源码编译安装NGINX
nginx通过rpm包进行的安装和配置: [web][nginx] 初识nginx -- 使用nginx搭建https DPI解码测试环境 现在,要通过源码进行安装. 参考:https://nginx ...
- LeetCode 922 Sort Array By Parity II 解题报告
题目要求 Given an array A of non-negative integers, half of the integers in A are odd, and half of the i ...
- python之if __name__ == '__main__'
if __name__ == '__main__' 我们简单的理解就是: 如果模块是被直接运行的,则代码块被运行,如果模块是被导入的,则代码块不被运行.
- 使用U盘为虚拟机安装系统
前提:使用虚拟机安装WIN8系统时,由于WIN8镜像文件大于4G无法使用虚拟安装,所以使用U盘安装. 1.装有U盘启动的WINPe系统 (1)下载 老毛桃U盘启动盘制作工具 (2)U盘清空 2.虚拟机 ...
- hotplug 热拔插机制框架
框架入口源文件: mdev.c (可根据入口源文件,再按着框架到内核走一遍) 内核版本:linux_2.6.22.6 硬件平台:JZ2440 以下是驱动框架:
- 第8章 用SQL语句操作数据
SQL的组成: (1)DML(Data Manipiation Language ,数据操作语言,)用来插入,修改和删除数据库中的数据,如:INSERT,UPDATE,DELETE等. (2)DDL( ...
- C语言课堂题集
1.输入一个整数,然后将其数字位置颠倒. int c,d=0,e; scanf("%d",&c); while (c!=0) { e=c%10; d=d*10+e; c/= ...