react-native-swiper icon indicating copy to clipboard operation
react-native-swiper copied to clipboard

fix initState calc the offset

Open huhuang03 opened this issue 4 years ago • 1 comments

I think you forget the the loop=true in initState calc the offset

The example:

import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
import Swiper from 'react-native-swiper';

export interface TestSwiperViewProps {}

var styles = {
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
};

const TestSwiperView: React.FC<TestSwiperViewProps> = props => {
  const [imgs, setImgs] = useState(['1', '2', '3']);

  return (
    <View
      style={{
        height: '100%',
      }}>
      <Button
        title={'setState'}
        onPress={() => {
          setImgs([...imgs]);
        }}
      />
      <Swiper style={styles.wrapper} showsButtons={false} loop={false}>
        {imgs.map(img => {
          return (
            <View testID="Hello" style={styles.slide1}>
              <Text style={styles.text}>{img}</Text>
            </View>
          );
        })}
      </Swiper>
    </View>
  );
};

export default TestSwiperView;

Reproduce step:

  1. scroll to page 2.
  2. click the top button.

huhuang03 avatar Aug 23 '21 07:08 huhuang03

@huhuang03 bro,you saved my life

swzift avatar Jul 13 '23 19:07 swzift