Question

我正在使用滚动视图，并希望检测用户何时结束拖动事件。我为onScrollEndDrag放了一个console.log，它没有给出任何控制台输出，即没有检测到onScrollEndDrag。有没有办法解决这个问题？

请参阅下面的代码。

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>
                );
            },
        });

Answer 1

这似乎对我有用。如果你把这些作为道具粘贴，你会得到任何控制台输出吗？

onTouchStart={() => console.log('onTouchStart')}
onTouchMove={() => console.log('onTouchMove')}
onTouchEnd={() => console.log('onTouchEnd')}
onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}

我大致按此顺序登录（最后） -

onTouchEnd
onScrollEndDrag
onMomentumScrollEnd

Answer 2

反应原生的prev版本中有一个错误。已在v.0.18.0中解决

如何在React-Native Android中检测拖动事件的结束

2 个答案: