我使用的是scrollview，希望检测用户何时结束拖动事件.
请看下面的代码.
var Main = React.createClass({
getInitialState: function() {
return {
LoadedPageState: false,
menuJson: [],
pageToLoad: "landingPage",
mainlogopic: 'mainlogo',
profilepic: 'profile',
notificationpic: 'notification',
bagpic: 'bag',
morepic: 'more',
moveend: 0,
count: 1,
frmDrag: false,
}
},
horScrollViewInstance: {
scrollTo: () => {}
},
control: {
onscroll: () => {}
},
touchStart: {
ontouchstart: () => {}
},
componentWillMount: function() {
var menuJson = require('./data/data.json');
this.setState({
menuJson: menuJson
});
},
currentPageAction: function(pageToLoad) {
this.setState({
LoadedPageState: true,
pageToLoad: pageToLoad
});
},
currentPageBackAction: function() {
this.setState({
LoadedPageState: false,
});
},
currentPageView: function() {
var currentPage = null;
if (this.state.pageToLoad == 'landingPage') {
currentPage = (<LandingPage/>);
} else if (this.state.pageToLoad == 'profilePage') {
currentPage = (<ProfilePage/>);
}
// <LoadedPage currentPageBackAction={this.currentPageBackAction}
// LoadedPageActive={this.state.LoadedPageState} />
return (<View>
<View style={{flex:1}}>
{currentPage}
</View>
</View>);
},
gotoLandingPage: function(isFrmDrag) {
this.horScrollViewInstance.scrollTo(0, 0);
this.setState({
pageToLoad: "landingPage",
frmDrag: isFrmDrag,
});
this.chkPage();
},
gotoProfilePage: function(isFrmDrag) {
this.setState({
pageToLoad: "profilePage",
frmDrag: isFrmDrag,
});
this.horScrollViewInstance.scrollTo(0, width);
this.chkPage();
},
gotoNotificationPage: function(isFrmDrag) {
this.setState({
pageToLoad: "notificatonPage",
frmDrag: isFrmDrag,
});
this.horScrollViewInstance.scrollTo(0, 2 * width);
this.chkPage();
},
gotoAddToBagPage: function(isFrmDrag) {
this.setState({
pageToLoad: "addToBagPage",
frmDrag: isFrmDrag,
});
this.horScrollViewInstance.scrollTo(0, 3 * width);
this.chkPage();
},
gotoMorePage: function(isFrmDrag) {
this.setState({
pageToLoad: "morePage",
frmDrag: isFrmDrag,
});
this.horScrollViewInstance.scrollTo(0, 4 * width);
this.chkPage();
},
restoreDefaultIcon: function() {
this.setState({
mainlogopic: 'mainlogochange',
profilepic: 'profile',
notificationpic: 'notification',
bagpic: 'bag',
morepic: 'more'
});
},
chkPage: function() {
this.restoreDefaultIcon();
if (this.state.pageToLoad == "landingPage") {
this.setState({
mainlogopic: 'mainlogo'
});
} else if (this.state.pageToLoad == "profilePage") {
this.setState({
profilepic: 'profilechange'
});
} else if (this.state.pageToLoad == "notificatonPage") {
this.setState({
notificationpic: 'notificationchange'
});
} else if (this.state.pageToLoad == "addToBagPage") {
this.setState({
bagpic: 'bagchange'
});
} else if (this.state.pageToLoad == "morePage") {
this.setState({
morepic: 'morechange'
});
}
},
_scrollToRef: function(instance) {
this.horScrollViewInstance.scrollTo = instance.scrollTo;
this.control.onscroll = instance.onscroll;
this.touchStart.ontouchstart = instance.ontouchstart;
},
onscroll: function(event: Object) {
var movestart;
movestart = event.nativeEvent.contentOffset.x;
// this.setState({ movestart: event.nativeEvent.contentOffset.x});
console.log(movestart);
if (this.state.frmDrag == true) {
if (movestart > 3.5 * width) {
this.gotoMorePage(false);
} else if (movestart > 2.5 * width) {
this.gotoAddToBagPage(false);
}
if (movestart > 1.5 * width) {
this.gotoNotificationPage(false);
} else if (movestart > 0.7 * width) {
this.gotoProfilePage(false);
} else if (movestart > 0) {
this.gotoLandingPage(false);
}
}
},
ontouchstart: function(event: Object) {
console.log("hello");
this.setState({
frmDrag: true
});
},
render: function() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Im in the Drawer!</Text>
</View>
);
return (
<DrawerLayoutAndroid drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} renderNavigationView={() => navigationView}>
<View style={styles.bodyWrapr}>
<View style={[{flex:1}]}>
<ScrollView
ref={this._scrollToRef}
onScroll={this.onscroll}
onTouchStart = {this.ontouchstart}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={true}
snapToInterval={width}
snapToAlignment={'start'}
contentContainerStyle ={{flex:1}}>
<View style={[{flex:1, flexDirection:'row'}]}>
<View style={{flex:1}}>
<ScrollView showsVerticalScrollIndicator = {true}>
<LandingPage/>
</ScrollView>
</View>
<View style={{flex:1}}>
<ScrollView showsVerticalScrollIndicator = {true}>
<ProfilePage/>
</ScrollView>
</View>
<View style={{flex:1}}>
<ScrollView showsVerticalScrollIndicator = {true}>
<NotificatonPage/>
</ScrollView>
</View>
<View style={{flex:1}}>
<ScrollView showsVerticalScrollIndicator = {true}>
<AddToBagPage/>
</ScrollView>
</View>
<View style={{flex:1}}>
<ScrollView showsVerticalScrollIndicator = {true}>
<MorePage/>
</ScrollView>
</View>
</View>
</ScrollView>
</View>
</View>
</DrawerLayoutAndroid>
);
},
});