淺談react native中的ScrollView
阿新 • • 發佈:2019-01-11
1、ScrollView介紹(官方解釋):ScrollView是一個通用的可滾動的容器,你可以在其中放入多個元件和檢視,而且這些元件並不需要是同類型的。ScrollView不僅可以垂直滾動(預設),還能水平滾動(通過horizontal屬性來設定)。
2、ScrollView常用屬性:
horizontal(布林值):當此屬性為true的時候,所有的的子檢視會在水平方向上排成一行,而不是預設的在垂直方向上排成一列。預設值為false。
showsHorizontalScrollIndicator(布林值):當此屬性為true的時候,顯示一個水平方向的滾動條。
showsVerticalScrollIndicator(布林值)
OnMomentumScrollEnd(function) :當一幀滾動完畢的時候呼叫,e.nativeEvent.contentOffset,可以用來獲取偏移量。
onScrollBeginDrag(function) :當開始手動拖拽的時候呼叫。
onScrollEndDrag(function) :當結束手動拖拽的時候呼叫。
onScroll(function) :在滾動的過程中,每幀最多呼叫一次此回撥函式。呼叫的頻率可以用scrollEventThrottle屬性來控制。
*注意:ScrollView是繼承自View,所以View中所有的屬性同樣適用於ScrollView。在此只介紹幾個常見的android和ios通用屬性。更多詳細屬性請移步到此處
3、基於ScrollView的輪播圖demo例項
全部demo程式碼:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ScrollView,
Dimensions
} from 'react-native' ;
export default class reactdemo02 extends Component {
constructor(props){
super(props);
this.state={
//當前顯示的圖片索引
currentIndex:0,
//線上圖片資料
imgDate:[
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494232883125&di=c8234065f7872532308c5396e0fcd3b8&imgtype=0&src=http%3A%2F%2Fimg1.91.com%2Fuploads%2Fallimg%2F130514%2F32-1305141I359.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg"
]
};
this.carousel = this.carousel.bind(this);
this.dragStart = this.dragStart.bind(this);
this.dragEnd = this.dragEnd.bind(this);
this.onAnnotationEnd = this.onAnnotationEnd.bind(this)
}
componentDidMount(){
this.carousel()
}
//點選圓點,關閉定時器,並設定當前圖片索引
dotClick(index){
clearInterval(this.carouselTimer);
this.setState({
currentIndex:index
},()=>{
var ScrollView = this.refs.scrollView;
const currentX = this.state.currentIndex*Dimensions.get('window').width;
ScrollView.scrollResponderScrollTo({x:currentX,animated:true})
})
}
//開始拖動,關閉定時器
dragStart(){
clearInterval(this.carouselTimer);
}
//拖動結束,開啟定時器
dragEnd(){
this.carousel()
}
//定時器
carousel(){
var ScrollView = this.refs.scrollView;
const timer = 4000;
let currentIndex = this.state.currentIndex;
this.carouselTimer = setInterval(()=>{
currentIndex===this.state.imgDate.length-1?currentIndex=0:currentIndex++
this.setState({
currentIndex:currentIndex
},()=>{
const currentX = currentIndex*Dimensions.get('window').width;
ScrollView.scrollResponderScrollTo({x:currentX,animated:true})
})
},timer)
}
//當一幀滾動完畢時,重新設定當前圖片的索引
onAnnotationEnd(e){
const offSetX = e.nativeEvent.contentOffset.x;
const currentIndex = offSetX/Dimensions.get('window').width;
this.setState({
currentIndex:currentIndex
})
}
render() {
const { imgDate, currentIndex } = this.state;
const screenWidth = Dimensions.get('window').width;
const imgDataList = imgDate.map((elem,index)=>{
return(
<Image key={index} style={{width:screenWidth,height:240}} source={{uri:elem}} />
)
});
const dotList = imgDate.map((elem,index)=>{
return (
<Text onPress={this.dotClick.bind(this,index)} key={index} style={[styles.dotStyle,{backgroundColor:currentIndex===index?"red":"#fff"}]}></Text>
)
})
return (
<View>
<Text style={styles.myTitleStyle}>ScrollView輪播圖</Text>
<ScrollView
ref="scrollView"
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
onScrollBeginDrag={this.dragStart}
onScrollEndDrag={this.dragEnd}
onMomentumScrollEnd={this.onAnnotationEnd}
>
{imgDataList}
</ScrollView>
<View style={styles.dotView}>{dotList}</View>
</View>
);
}
}
const styles = StyleSheet.create({
myTitleStyle:{
flexDirection:'row',
fontSize:30,
color:'#000',
textAlign:'center',
paddingTop:12,
paddingBottom:12,
marginTop:24,
marginBottom:24
},
dotStyle:{
width:24,
height:24,
borderRadius:12,
marginRight:10,
},
dotView:{
flexDirection:'row',
marginLeft:15,
position:'absolute',
bottom:10
}
});
AppRegistry.registerComponent('reactdemo02', () => reactdemo02);
顯示效果如下(此處為單純圖片,動態效果請自己嘗試)