我的 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 时不是一个对象
最佳答案
你应该绑定(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>
关于android - 如何 Hook viewpager 滑动事件以更新状态 react-native android?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38481282/