Question

我的js是abit生锈的，我对我在react-native android应用程序中刷卡事件后如何更新状态感到困惑。我试图根据ViewPager连接此official ViewPager，我只想让滑块滑动到该页面时更新pagenum。有关方法的任何帮助吗？

滑块本身有效，但我对如何基于事件或回调更新状态感到困惑。我真正希望做的是在每次页面幻灯片后更新父视图的背景颜色样式。

欢迎页面

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>

错误 error: 'undefined is not an object when evaluating this.state.pagecount

Answer 1

你应该绑定这个关键字。就像这样：

 <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>

Answer 2

您可能会混合使用两个不同的插件，但使用'@react-native-community/viewpager'中的ViewPager，可以按以下步骤完成操作（注意使用onPageSelected和处理程序）；

<ViewPager
     pageMargin={10}
     style={styles.viewPager}
     initialPage={currentPageIndex}
     onPageSelected={(eventDate) => this.handleHorizontalScroll(eventDate.nativeEvent)}
>
          {pages.map((item) => (
            <Card style={{ elevation: 3, margin: 50, borderRadius: 10, backgroundColor }}>
              <CardItem header style={{ borderRadius: 10, backgroundColor }} bordered>
                <Text>Card Header</Text>
              </CardItem>
              <CardItem style={{ flex: 1, borderBottomWidth: 0.2, backgroundColor }}>
                <ScrollView>
                  <Text style={{ fontFamily, color, fontSize, textAlign: 'justify' }}>
                    {item.text}
                  </Text>
                </ScrollView>
              </CardItem>
              <CardItem style={{ borderRadius: 10, backgroundColor }}>
                <Text>Card Footer</Text>
              </CardItem>
            </Card>
          ))}
</ViewPager>

您的水平Scroll处理程序或onPageSelectedHandler应该是这样的：

handleHorizontalScroll = ({ position }) => {
    console.log('Current Card Index', position);

    this.setState({currentIndex: position})
};

如何挂钩viewpager刷卡事件更新状态react-native android？

2 个答案: