Question

react-native-swiper 下一个/上一个按钮事件

2019-08-01

9205

react-native react-native-swiper

Swiper 索引值按页面顺序显示。但是，当按下按钮时，索引值会增加到无穷大。

例如）下一个按钮单击 -> 6/5、7/5、8/5

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

https://github.com/leecade/react-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

使用滑动条的 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 中使用 onIndexChanged 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>
      </>
    )}