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的更多相关文章

  1. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  2. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  3. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  6. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  7. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  8. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. [No000015C]计算机科学关键领域

  2. A. Srdce and Triangle 几何题

    链接:https://www.nowcoder.com/acm/contest/104/A来源:牛客网 题目描述 Let  be a regualr triangle, and D is a poin ...

  3. gateone安装使用

    下载地址 https://github.com/liftoff/GateOne unzip GateOne-master.zip cd GateOne-master/ python setup.py ...

  4. [nginx] 从源码编译安装NGINX

    nginx通过rpm包进行的安装和配置: [web][nginx] 初识nginx -- 使用nginx搭建https DPI解码测试环境 现在,要通过源码进行安装. 参考:https://nginx ...

  5. 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 ...

  6. python之if __name__ == '__main__'

    if __name__ == '__main__' 我们简单的理解就是: 如果模块是被直接运行的,则代码块被运行,如果模块是被导入的,则代码块不被运行.

  7. 使用U盘为虚拟机安装系统

    前提:使用虚拟机安装WIN8系统时,由于WIN8镜像文件大于4G无法使用虚拟安装,所以使用U盘安装. 1.装有U盘启动的WINPe系统 (1)下载 老毛桃U盘启动盘制作工具 (2)U盘清空 2.虚拟机 ...

  8. hotplug 热拔插机制框架

    框架入口源文件: mdev.c (可根据入口源文件,再按着框架到内核走一遍) 内核版本:linux_2.6.22.6     硬件平台:JZ2440 以下是驱动框架:

  9. 第8章 用SQL语句操作数据

    SQL的组成: (1)DML(Data Manipiation Language ,数据操作语言,)用来插入,修改和删除数据库中的数据,如:INSERT,UPDATE,DELETE等. (2)DDL( ...

  10. C语言课堂题集

    1.输入一个整数,然后将其数字位置颠倒. int c,d=0,e; scanf("%d",&c); while (c!=0) { e=c%10; d=d*10+e; c/= ...