android - 如何 Hook viewpager 滑动事件以更新状态 react-native android？

Question

我的 js 有点生疏，我对如何在我的 react native android 应用程序中的滑动事件后更新状态感到困惑。我正在尝试连接这个 ViewPager基于 official ViewPager我只想让 pagenum 在 slider 滑动到该页面时更新。有什么帮助吗？

slider 本身可以工作，但我对如何根据事件或回调更新状态感到困惑。我真正想做的是在每次页面滑动后更新父 View 的背景颜色样式。

欢迎页面

import {IndicatorViewPager, PagerDotIndicator} from 'rn-viewpager';

var AboutPage1 = require('../about/AboutPage1');
var AboutPage2 = require('../about/AboutPage2');

class WelcomeScreen extends Component {

    state = {
        pagenum: 0
    };

  render() {
        <View >
            // the parent view i wish to change bgcolor
            <View style={{flex:1}}>
                // this is the viewpager
                <IndicatorViewPager
                        indicator={this._renderDotIndicator()}
                        onPageScroll={this.onPageScroll}
                        onPageSelected={this.onPageSelected}
                        onPageScrollStateChanged={this.onPageScrollStateChanged}
                        ref={viewPager => { this.viewPager = viewPager;
                }}>
                    // some components in this first view
                    <View onPress={this.onPageSelected.bind(this,this.pagenum)}>
                        // some components
                    </View>
      //  these are just views wrapping pages that are themselves views
                    <View onPress={this.onPageSelected.bind(this,this.pagenum)}>
                        <AboutPage1 onPress={this.onPageSelected.bind(this, this.pagenum)}/>
                        <Text>{'count' + this.state.pagenum}</Text>
                    </View>
                    <View>
                        <AboutPage2 onPress={this.onPageSelected.bind(this, this.pagenum)}/>
                        <Text>{'count' + this.state.pagenum}</Text>
                    </View>
                </IndicatorViewPager>
            </View>
        </View>
    );
}

    _renderDotIndicator() {
        return (
            <PagerDotIndicator
                pageCount={5}
            />
        );
    }


 // callback that is called when viewpager page is finished selection
 onPageSelected(e) {
     console.log('state is: '+this.state)
     this.SetState({pagenum: this.state.pagenum+1});
    console.log('state is: '+this.state)
 }

}

关于页面

  <View>
        <Text>Welcome to My App</Text>
  </View>

错误错误:'undefined 在计算 this.state.pagecount 时不是一个对象

Answer 1

你应该绑定(bind)这个关键字。像这样:

 <IndicatorViewPager
                        indicator={this._renderDotIndicator()}
                        onPageScroll={this.onPageScroll.bind(this)}
                        onPageSelected={this.onPageSelected.bind(this)}
                        onPageScrollStateChanged={this.onPageScrollStateChanged.bind(this)}
                        ref={viewPager => { this.viewPager = viewPager;
                }}>
...

  </IndicatorViewPager>