web-dev-qa-db-ja.com

React-Nativeでドラッグイベントの終了を検出する方法Android

私はscrollviewを使用しており、ユーザーがドラッグイベントを終了したことを検出したいと考えています。 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>
                );
            },
        });
13
rashmi chachan

以前のバージョンのreact-nativeにはバグがありました。 v0.10.18.0で解決済み

2
rashmi chachan

それは私のために働くようです。これらを小道具として貼り付けた場合、コンソール出力は得られますか?

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
23
Dan Munday