react-native轮播

最近公司业务需求，需要一个比较特别的轮播，但是发现没有找到特别符合需求的轮子，于是自己手动造了一个。

在设计上参考了一些市面上的轮子，ezswiper（这个还是蛮满意的，不过太老了，而且闪屏比较严重）。下面放出本人的轮子的演示。

normal模式

const App = () => {
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <SafeAreaView style={{ flex: 1 }}>
      <SwiperR
        autoPlay={true}
        mode={'normal'}
        style={{ width: '100%', height: 100 }}>
        <View
          style={{
            backgroundColor: 'pink',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>1</Text>
        </View>
        <View
          style={{
            backgroundColor: 'black',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>2</Text>
        </View>
        <View
          style={{
            backgroundColor: 'blue',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>3</Text>
        </View>
        <View
          style={{
            backgroundColor: 'green',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>4</Text>
        </View>
      </SwiperR>
    </SafeAreaView>
  );
};

复制代码

card模式

const App = () => {
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <SafeAreaView style={{ flex: 1 }}>
      <SwiperR
        autoPlay={true}
        cardSetting={{ cardSpace: 90, cardSmallSide: 40, cardSide: 250 }}
        mode={'cardSide'}
        style={{ width: '100%', height: 100 }}>
        <View
          style={{
            backgroundColor: 'pink',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>1</Text>
        </View>
        <View
          style={{
            backgroundColor: 'black',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>2</Text>
        </View>
        <View
          style={{
            backgroundColor: 'blue',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>3</Text>
        </View>
        <View
          style={{
            backgroundColor: 'green',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>4</Text>
        </View>
      </SwiperR>
    </SafeAreaView>
  );
};
复制代码

效果图

项目地址,希望给个star~