react-native-swiper 轮播类组件
来源:互联网 发布:双击屏幕唤醒软件 编辑:程序博客网 时间:2024/05/21 12:10
1.github上的地址:
https://github.com/lwx123/react-native-swiper
2.终端运行:
$ npm i react-native-swiper --save
3.导入,
import Swiper from 'react-native-swiper';
4.完整代码:
/** * Created by lvyanbo on 2017/4/1. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View,} from 'react-native';import Swiper from 'react-native-swiper';export default class HomeComponent extends Component { render() { return ( <View style={styles.container}> <Swiper style={styles.wrapper} height={200} showsButtons={true} paginationStyle={{bottom:10}} dot={<View style={{width:8,height:8,backgroundColor:'white',borderRadius:4,marginLeft:3,marginRight:3}}></View>} activeDot={<View style={{width:8,height:8,backgroundColor:'orange',borderRadius:4,marginLeft:3,marginRight:3}}></View>} > <View style={styles.slide1}> <Text style={styles.text}>Hello Swiper</Text> </View> <View style={styles.slide2}> <Text style={styles.text}>Beautiful</Text> </View> <View style={styles.slide3}> <Text style={styles.text}>And simple</Text> </View> </Swiper> </View> ); }}const styles = StyleSheet.create({ container: { backgroundColor: '#F5FCFF', }, wrapper: { }, slide1: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9DD6EB', }, slide2: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#97CAE5', }, slide3: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#92BBD9', }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold', }});paginationStyle设置点的样式,
dot和activeDot设置选中和未选中的样式
看github,里面有很多的样式,可以自己添加
效果图:
0 0
- React-Native-swiper React Native 轮播类组件
- react-native-swiper 轮播类组件
- React-Native学习--轮播图第三方组件-react-native-swiper
- React-Native学习--轮播图第三方组件-react-native-swiper
- React Native 如何做轮播图 react-native-swiper
- 将第三方组件react-native-swiper应用在欢迎界面中
- react-native 轮播图 ——react-native-swiper使用
- react-native react-native-swiper 设置horizontal=false无效
- react-native使用Swiper在安卓上不显示
- 基于react-native-swiper 封装的bannerView
- react-native-swiper 让人无语的坑
- React Native 组件生命周期
- react-native 自定义组件
- React native Image组件
- react native 组件生命周期
- react-native 组件demo
- react-native组件笔记
- React Native--组件Component
- GO tcp server demo
- Android原生项目集成React Native
- 分析Linux内核创建一个新进程的过程
- PHP的GC机制
- Android下Opengl ES实现单屏幕双眼显示
- react-native-swiper 轮播类组件
- NYOJ-23 取石子(巴什博弈)
- Oracle主键自增长及自动生成sequence
- win10按两次开机键才能启动系统
- 理解 Android Build 系统
- python 素数
- “玲珑杯”ACM比赛 Round #13 B -- 我也不是B,倍增+二分!
- 在oschina踩的坑
- Java writer reader与相关练习