Recently, the company’s business needs a special wheel, but found that there was not a special wheel to meet the needs, so I manually built one.

The design references some wheels on the market, the Ezswiper (which is satisfactory, but it’s too old and has a bad splash screen). Here’s a demo of my own wheel.

Normal mode

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>
  );
};

Copy the code

Card model

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>
  );
};
Copy the code

rendering

Project address, hope to give a star~