Come rilevare la fine di un evento di trascinamento in Android React-Native

Question

Sto usando una vista a scorrimento e voglio rilevare quando l'utente termina l'evento di trascinamento. Ho messo un console.log per onScrollEndDrag e non fornisce alcun output della console, cioè non è stato rilevato onScrollEndDrag. C'è un modo per aggirarlo?

Si prega di consultare il codice qui sotto.

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

c'era un bug nella versione prev di reagire-native. È stato risolto in v.0.18.0

Answer 2

Sembra funzionare per me. Se li incolli come oggetti di scena, ottieni qualche output della console?

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')} 

ottengo i log in grosso modo questo ordine (alla fine) -

onTouchEnd 
onScrollEndDrag 
onMomentumScrollEnd