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. JavaScript中的Array类型详解

    与其他语言中的数组的区别: 1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据. 2.数组的大小是动态调整的,可以随着数据的添加自动的增长. 1.两种 ...

  2. readonly enable

    <input type="text" id="UserName" style="width:20%;" disabled=" ...

  3. 原码,补码,反码的概念及Java中使用那种存储方式

    原码,补码,反码的概念及Java中使用那种存储方式: 原码:原码表示法是机器数的一种简单的表示法.其符号位用0表示正号,用:表示负号,数值一般用二进制形式表示 补码:机器数的补码可由原码得到.如果机器 ...

  4. 初识jmeter(2)

    1.层级关系: 聚合报告1记录HTTP请求1的结果: 聚合报告2记录HTTP请求2的结果: 聚合报告记录所有线程组中HTTP请求的结果. 2.线程同时启动(并发) 一是可以在把线程组里面的 Ramp- ...

  5. ubuntu64位系统编译时头文件找不到的问题(可以查看g++ -v路径,设置export C_INCLUDE_PATH,CPLUS_INCLUDE_PATH)

    今天编译webrtc时出现以下错误: ninja -C out/Debug Allninja: Entering directory `out/Debug'[1/6] CXX obj/talk/app ...

  6. CF891C Envy 最小生成树/虚树

    正解:最小生成树/虚树 解题报告: 传送门! sd如我就只想到了最暴力的想法,一点儿优化都麻油想到,,,真的菜到爆炸了QAQ 然后就分别港下两个正解QAQ 法一,最小生成树 这个主要是要想到关于最小生 ...

  7. c语言数组应用

    #include <stdio.h> #define SIZE 5 int main(void) { int sum[3]={0},sum2[SIZE]={0},i,sum1=0; dou ...

  8. explain之key_len计算

    通常在优化SQL查询的时候,我们都会使用explain分析SQL执行计划,通常来说当用到组合索引的时候我们如何判断索引完全用上呢?当然高手看看表结构及SQL语句就知道到底用到了几个字段,对于不熟悉的同 ...

  9. Android支持全面屏设置

    在AndroidManifest的application里面设置resizeableActivity的属性为true <application android:name=".Compl ...

  10. 升级my.cnf注意

    升级my.cnf注意 mkdir -p /ngbs/data/{logs,tmp} vi  /etc/init.d/mysqlbasedir=/usr/local/mysql datadir=/ngb ...