React-Native-Swiper下一个/上一个按钮事件

Question

按页顺序顺序排列swiper索引值。但是，按下按钮时，索引值将升至无穷大。

ex(下一个按钮单击 -> 6/5、7/5、8/5

我想做的是停止5/5的按钮事件，但我不知道该怎么办。

https://github.com/leecade/reaeact-native-swiper

app.js

const renderPagination = (index, total, context) => {
  return (
    <View style={styles.paginationStyle}>
      <Text style={{ color: 'grey' }}>
        <Text style={styles.paginationText}>{index + 1}</Text>/{total}
      </Text>
    </View>
  )
}
export default class App extends Component {
  constructor(props){
    super(props);
    this.onPressNext = this.onPressNext.bind(this);
    this.state = {
      idxActive: 1
    }
 }
  onPressPrev = () => {
    this.refs.swiper.scrollBy(-1)
  }
  onPressNext = () => {
    this.refs.swiper.scrollBy(1);
  }
  render() {
    return (
      <View style={styles.container}>

        <Swiper
          style={styles.wrapper}
          renderPagination={renderPagination}
          showsButtons={false}
          loop={false}
          ref={'swiper'}
        >
          <View style={styles.slide}>
            <Text style={styles.text}>1 page</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>2 page</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>3 page</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>4 page</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>5 page</Text>
          </View>
        </Swiper>
        <View style={styles.buttoncontainer}>
          <Button
            onPress={this.onPressPrev}
            title="previous">
          </Button>
          <Button
            onPress={this.onPressNext}
            title="next">
          </Button>
        </View>
      </View>
    );
  }
}

Answer 1

使用swiper的onIndexedChanged支柱获取最新的index并将其保存在您的本地组件状态中。类似：

export default class App extends Component {
  constructor(props){
    super(props);
    this.onPressNext = this.onPressNext.bind(this);
    this.onPressPrev = this.onPressPrev.bind(this);
    this.state = {
      idxActive: 0
    }
 }
  onPressPrev = () => {
    const {idxActive} = this.state;
    if (idxActive > 0) {
      this.refs.swiper.scrollBy(-1)
    }
  }
  onPressNext = () => {
    const {idxActive} = this.state;
    // Probably best set as a constant somewhere vs a hardcoded 5
    if (idxActive < 5) {
      this.refs.swiper.scrollBy(1);
    }
  }
  render() {
    return (
      <View style={styles.container}>

        <Swiper
          ... etc.
          onIndexChanged={idxActive => this.setState({idxActive})}
        >
          ... etc.

Answer 2

这是帮助我的，在swiper中使用indindexchanged Prop，它可以跟踪您的swiper元素长度，以下代码片段适用于功能组件。

。

const [keyNumber, setKeyNumber] = useState(0);
const swiperRef = useRef(null);
const isPrevDisabled = keyNumber < 1;
const isNextDisabled = keyNumber > calloutScreens.length - 2;
const renderPrevButton = () => {
 return (
   <TouchableOpacity
     style={styles.buttonWrapper}
     disabled={isPrevDisabled}
     onPress={() => swiperRef.current?.scrollBy(-1)}>
     <Text
       style={isPrevDisabled ? styles.disabledButton : 
        styles.activeButton}>
      {PREVIOUS}
     </Text>
   </TouchableOpacity>
 );
};
const renderNextButton = () => {
  return (
   <TouchableOpacity
     style={styles.buttonWrapper}
     disabled={isNextDisabled}
     onPress={() => swiperRef.current?.scrollBy(1)}>
     <Text
       style={isNextDisabled ? styles.disabledButton : 
        styles.activeButton}>
       {NEXT}
     </Text>
   </TouchableOpacity>
  );
};
const handleIndexChange = (index: number) => {
 setKeyNumber(index);
};
 return (
  <View style={styles.container}>
    {calloutScreens.length > 0 && (
      <>
        <Swiper
          autoplay={true}
          ref={swiperRef}
          autoplayTimeout={5}
          loop={false}
          activeDotStyle={styles.activeDotStyle}
          dotStyle={styles.inactiveDotStyle}
          showsPagination={true}
          onIndexChanged={handleIndexChange}>
          {renderSwiperContent()}
        </Swiper>
        <View style={styles.footerContainer}>
          {renderPrevButton()}
          <HKButton
            title={BUTTON_TITLE}
            onPress={handleOnboardingCompletion}
          />
          {renderNextButton()}
        </View>
      </>
    )}