RN无限轮播
发布时间:2020-12-15 20:39:50 所属栏目:百科 来源:网络整理
导读:这里我使用的是一个第三方的插件react-native-swiper 具体可以参考https://www.npmjs.com/package/react-native-swiper 效果图 ? 使用: $ npm i react-native-swiper --save ?代码: import React,{Component} from ‘react‘;import { AppRegistry,StyleSh
这里我使用的是一个第三方的插件react-native-swiper 具体可以参考https://www.npmjs.com/package/react-native-swiper 效果图 ? 使用: $ npm i react-native-swiper --save ?代码: import React,{Component} from ‘react‘; import { AppRegistry,StyleSheet,Text,View,TouchableOpacity,Image,ScrollView } from ‘react-native‘; import Swiper from ‘react-native-swiper‘ var Dimensions = require(‘Dimensions‘); var {width,height} = Dimensions.get("window");//第一种写法 export default class MyApp extends Component { _onIndexChanged(index){ // alert(index) } render() { return ( <View style={styles.wrapper}> <View style={styles.swiperView}> <Swiper style={styles.swiperStyle} showsButtons={false}//左右两边的< >箭头是否显示 horizontal={true}//是否水平滚动,默认true loop={true}//是否轮播,默认true index={1}//当前默认第几页,默认0 onIndexChanged={this._onIndexChanged}//当前滚动到第几页的事件 autoplayTimeout = {1} //轮播的时间 autoplay={true}//是否自动轮播,默认false autoplayDirection={true}//是否反向轮播,默认true 左->右 showsPagination = {true} //是否显示dot dot = {<View style={{width:8,height:8,backgroundColor:‘red‘,marginRight: 5}}/>} //指定dot paginationStyle = {{bottom: 10}} //dot的位置 activeDot = {<View style={{width:8,backgroundColor:‘yellow‘,marginRight: 5}} />} //选中的dot的样式 > <View style={styles.slide1} > <Text style={styles.text}>Hello Swiper{width}</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> </View> ) } } const styles = StyleSheet.create({ wrapper: { flex: 1,backgroundColor:"#ff0000" },swiperView:{ width:width,height:200,backgroundColor:"#000000" },swiperStyle:{ backgroundColor:"#00ff00" },slide1: { justifyContent: ‘center‘,alignItems: ‘center‘,backgroundColor: ‘#0000ff‘,flex: 1 },slide2: { flex: 1,justifyContent: ‘center‘,},slide3: { flex: 1,text: { color: ‘#fff‘,fontSize: 30,fontWeight: ‘bold‘,} }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |