feat(Swiper): Add new component. (#180)

* fix:  修改首页

* 添加Android(Windows)环境安装文档

* 添加轮播图组件

Co-authored-by: 秋小白.丶 <oncwnuOahxb2al-n8NtRsvkJAg2Q@git.weixin.qq.com>

Author: zuojiahui

example/examples/src/routes.tsx

@@ -1,4 +1,4 @@
-import {StackNavigationProp} from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 type ModalStackNavigation = StackNavigationProp<{}>;
 
@@ -336,6 +336,14 @@ export const stackPageData: Routes[] = [
     params: {
       title: 'SpeedDial 悬浮标记',
       description: 'SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。',
+    }
+  },
+  {
+    name: 'Swiper',
+    component: require('./routes/Swiper').default,
+    params: {
+      title: 'Swiper 轮播图',
+      description: '轮播图',
     },
   },
 ];

example/examples/src/routes/Swiper/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Swiper } from '@uiw/react-native';
+const SwiperDemo = () => {
+    const data = [
+        { url: 'https://img2.baidu.com/it/u=1669646624,570058533&fm=26&fmt=auto&gp=0.jpg' },
+        { url: 'https://img0.baidu.com/it/u=1079471900,3150741739&fm=26&fmt=auto&gp=0.jpg' },
+        { url: 'https://img0.baidu.com/it/u=2385784823,911121382&fm=26&fmt=auto&gp=0.jpg' },
+    ]
+    return (
+        <View>
+            <Swiper dataSource={data} height={150} />
+        </View>
+
+    )
+}
+export default SwiperDemo

packages/core/src/Swiper/index.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useRef, useCallback, } from 'react'
+import { StyleSheet, View, Image } from 'react-native';
+export interface dataSourceType {
+    url: string
+    // onClick?: () => void
+}
+export interface SwiperProps {
+    dataSource: dataSourceType[];
+    time?: number;
+    width?: number;
+    height?: number;
+    autoplay?: boolean
+}
+const Swiper = (porps: SwiperProps) => {
+    const { dataSource = [], time = 3000, autoplay = true, width = "100%", height = 130 } = porps
+    let [curIndex, setCurIndex] = useState(0)
+    let timer = useRef<NodeJS.Timeout | undefined>();
+    const autoPlay = useCallback(() => {
+        clearInterval(timer.current as unknown as number);
+        timer.current = setInterval(() => {
+            if (curIndex === dataSource.length - 1) {
+                setCurIndex(0);
+            } else {
+                setCurIndex(curIndex + 1);
+            }
+        }, time);
+    }, [dataSource, curIndex]);
+    useEffect(() => {
+        if (autoplay) {
+            autoPlay()
+        }
+    }, [autoPlay]);
+    useEffect(() => {
+        return () => {
+            clearInterval(timer.current as unknown as number);
+        };
+    }, []);
+    return (
+        <View style={StyleSheet.flatten([styles.box, { height }])}>
+            <View style={StyleSheet.flatten([styles.banner, { width }])}>
+                <View style={StyleSheet.flatten([styles.bannerOut, { marginLeft: curIndex * -100 + '%' }])}>
+                    {dataSource.map((item: any, index: number) => {
+                        return <Image style={styles.tinyLogo} key={index} source={{
+                            uri: item.url,
+                        }} />
+                    })}
+                </View>
+                <View style={styles.dotBox}>
+                    {dataSource.map((_: any, index: number) => {
+                        return <View key={index} style={StyleSheet.flatten([styles.dot, index === curIndex ? styles.dotSetColor : styles.dotColor])} />
+                    })}
+                </View>
+            </View>
+        </View>
+
+    )
+}
+const styles = StyleSheet.create({
+    box: {
+        margin: 12,
+        height: 130,
+    },
+    banner: {
+        width: "100%",
+        borderRadius: 25,
+        position: "relative",
+        overflow: "hidden",
+    },
+    bannerOut: {
+        width: "100%",
+        height: "100%",
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginLeft: 0
+    },
+    tinyLogo: {
+        width: "100%",
+        height: "100%",
+    },
+    dotBox: {
+        width: "100%",
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: "center",
+        position: "absolute",
+        bottom: 12
+    },
+    dot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        marginTop: 0,
+        marginBottom: 0,
+        marginLeft: 12,
+        marginRight: 12
+    },
+    dotColor: {
+        backgroundColor: "lightgray",
+    },
+    dotSetColor: {
+        backgroundColor: "red",
+    }
+});
+export default Swiper

packages/core/src/index.tsx

@@ -63,8 +63,8 @@ export * from './ExpandableSection';
 export { default as Steps } from './Steps';
 export * from './Steps';
 
-export { default as Rating } from './Rating'
-export * from './Rating'
+export { default as Rating } from './Rating';
+export * from './Rating';
 
 export { default as Timeline } from './Timeline';
 export * from './Timeline';
@@ -79,7 +79,8 @@ export * from './NoticeBar';
 
 export { default as SpeedDial } from './SpeedDial'
 export * from './SpeedDial'
-
+export { default as Swiper } from './Swiper';
+export * from './Swiper';
 /**
  * Typography
  */