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. VS在解决方案中添加一个别人给的项目,我自己的项目主窗体中不能调用

    提示缺少Using引用,我在主窗体中已经写了Using XX,还是提示“未能找到类型或命名空间名“ XX”(是否缺少Using指令或程序集引用?)”,以前只要Using 一下就好了,后来想了一下,要在 ...

  2. webstorm背景颜色更改

    一.file --> settings 二.editor-->color scheme  然后右边下拉选择 三.apply -- > ok

  3. vue脚手架用axios请求本地数据

    首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...

  4. CF865D Buy Low Sell High 贪心

    正解:贪心 解题报告: 传送门! 这题首先有个很显然的dp,太基础了不说QAQ 然后考虑dp是n2的,显然过不去,所以换一个角度 然后发现这题和普通的dp的题有什么不同呢?就它这儿是一天只能买一支股, ...

  5. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

  6. jquery中$.get()提交和$.post()提交的区别

    相同点:都是异步请求的方式来获取服务器端的数据: 异同点: 1.请求方式不同:$.get()方法使用 GET 方法来进行异步请求的:$.post()方法使用POST方法来进行异步请求的: 2.参数传递 ...

  7. oracle中varchar2(2)存不了一个汉字的原因

    错误提示: 一个汉字占了三个字节,而不是两个,这跟字符集有关. 查一下字符集:select userenv('language') from dual; 结果显示,本机Oracle的字符集是UTF-8 ...

  8. SpringBoot-整合@transactional注解

    springboot默认集成事务,只主要在方法上加上@Transactional即可

  9. mysql 操作sql语句 目录

    mysql 操作sql语句 操作数据库 mysql 操作sql语句 操作数据表 mysql 操作sql语句 操作数据表中的内容/记录

  10. 指向list的指针

    #include<list> #include<string> #include<iostream> using namespace std; int main() ...