feat(Swiper): 添加轮播滑动，点击事件，添加组件文档 (#185)

* fix:  修改首页

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

* 添加轮播图组件

* 添加轮播滑动，点击事件，添加组件文档

Co-authored-by: 秋小白.丶 <[email protected]>

Author: zuojiahui

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

@@ -9,9 +9,8 @@ const SwiperDemo = () => {
     ]
     return (
         <View>
-            <Swiper dataSource={data} height={150} />
+            <Swiper width={200} dataSource={data} height={150} borderRadius={24} />
         </View>
-
     )
 }
 export default SwiperDemo

packages/core/src/Swiper/README.md

@@ -0,0 +1,38 @@
+Swiper 轮播图
+---
+
+最基础的轮播图，可承载图片。
+
+### 基础示例
+
+<!--DemoStart--> 
+```jsx
+import React from 'react';
+import { Swiper } from '@uiw/react-native';
+const SwiperDemo = () => {
+    const data = [
+        { url: "https://reactnative.dev/img/tiny_logo.png", onClick: () => { console.log("你好！uiw/react-native") } },
+        { url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' },
+        { url: require('@expo/snack-static/react-native-logo.png') }
+    ]
+    return (
+        <View>
+            <Swiper width={200} dataSource={data} height={150} borderRadius={24} />
+        </View>
+    )
+}
+export default SwiperDemo
+```
+<!--End-->
+
+## Props
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| dataSource   | 数据源         | Array     | [ ] |
+| width        | 宽度           |  Number   |屏幕宽度|
+| height       | 高度           | Number    |  130 |
+| time         | 执行时间       | Number    | 3000（3s） |
+| borderRadius | 圆角边框       | Number    |  0 |
+| autoplay     | 是否开启定时器  | Boolean   | true|
+| dotStyle     | 圆点类型 ( dot : 圆点， block : 方块 )       | String    | dot |

packages/core/src/Swiper/index.tsx

@@ -1,98 +1,151 @@
 import React, { useState, useEffect, useRef, useCallback, } from 'react'
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View, Image, ScrollView, Dimensions, TouchableOpacity, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 export interface dataSourceType {
     url: string
-    // onClick?: () => void
+    onClick?: () => void
 }
+export type dotType = 'dot' | 'block'
 export interface SwiperProps {
-    dataSource: dataSourceType[];
+    // 数据源
+    dataSource?: dataSourceType[];
+    // 轮播图宽度
+    width?: number,
+    // 轮播图高度
+    height?: number,
+    // 播放时间
     time?: number;
-    width?: number;
-    height?: number;
-    autoplay?: boolean
+    // 圆角边框
+    borderRadius?: number,
+    // 是否开启自动播放
+    autoplay?: boolean,
+    // 指示点样式 dot: 圆点  block: 方块
+    dotStyle?: dotType
 }
 const Swiper = (porps: SwiperProps) => {
-    const { dataSource = [], time = 3000, autoplay = true, width = "100%", height = 130 } = porps
+    const gitwidth = Dimensions.get('window').width;
+    const { dataSource = [], width = gitwidth, height = 130, time = 3000, autoplay = true, borderRadius = 0, dotStyle = "dot" } = porps
     let [curIndex, setCurIndex] = useState(0)
     let timer = useRef<NodeJS.Timeout | undefined>();
+    const scrollToRef: any = useRef()
+
+    // 自动播放
     const autoPlay = useCallback(() => {
         clearInterval(timer.current as unknown as number);
         timer.current = setInterval(() => {
+            let index = curIndex + 1
             if (curIndex === dataSource.length - 1) {
+                index = 0
                 setCurIndex(0);
             } else {
                 setCurIndex(curIndex + 1);
             }
+            scrollToRef.current.scrollTo({ x: width * index, y: 0, animated: true })
         }, time);
-    }, [dataSource, curIndex]);
+    }, [curIndex]);
+
+    // 开启播放
     useEffect(() => {
-        if (autoplay) {
-            autoPlay()
-        }
+        if (autoplay) autoPlay()
     }, [autoPlay]);
+
+    // 页面离开停止播放
     useEffect(() => {
         return () => {
             clearInterval(timer.current as unknown as number);
         };
     }, []);
+
+    // 开始拖拽终止定时器
+    const onScrollBeginDrag = () => {
+        if (autoplay) clearInterval(timer.current as unknown as number)
+    }
+
+    // 停止拖拽开启定时器
+    const onScrollEndDrag = () => {
+        if (autoplay) autoPlay()
+    }
+
+    // 拖拽成功
+    const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        e.persist();
+        let offSetX = e.nativeEvent.contentOffset.x;
+        let mentWidth = e.nativeEvent.layoutMeasurement.width;
+        let page = offSetX / mentWidth;
+        setCurIndex(page)
+    }
     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 style={StyleSheet.flatten([styles.banner, { width, height }])}>
+            <ScrollView
+                ref={scrollToRef}
+                horizontal={true}
+                showsHorizontalScrollIndicator={false}
+                pagingEnabled={true}
+                onScrollBeginDrag={onScrollBeginDrag}
+                onScrollEndDrag={onScrollEndDrag}
+                onMomentumScrollEnd={onMomentumScrollEnd}
+            >
+                {dataSource.map((item: dataSourceType, index: number) => {
+                    return (
+                        <View key={index} style={{ width, height }}>
+                            <View style={{ padding: 12 }}>
+                                <TouchableOpacity activeOpacity={1} onPress={() => {
+                                    item.onClick && item.onClick()
+                                }}>
+                                    <Image
+                                        key={index}
+                                        style={StyleSheet.flatten([{ borderRadius, width: "100%", height: "100%", }])}
+                                        resizeMode="cover"
+                                        source={typeof item.url === "number" ? item.url : { uri: item.url, }}
+                                    />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    )
+                })}
+            </ScrollView>
+            <View style={styles.dotBox}>
+                {dataSource.map((_: dataSourceType, index: number) => {
+                    return <View
+                        key={index}
+                        style={
+                            StyleSheet.flatten([dotStyle === "block" ? styles.block : styles.dot,
+                            index === curIndex ? styles.dotSetColor : styles.dotColor])
+                        } />
+                })}
             </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
+        bottom: 22
     },
     dot: {
-        width: 10,
-        height: 10,
-        borderRadius: 5,
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginTop: 0,
+        marginBottom: 0,
+        marginLeft: 8,
+        marginRight: 8
+    },
+    block: {
+        width: 16,
+        height: 3,
         marginTop: 0,
         marginBottom: 0,
-        marginLeft: 12,
-        marginRight: 12
+        marginLeft: 8,
+        marginRight: 8
     },
     dotColor: {
         backgroundColor: "lightgray",

website/src/pages/components/swiper/index.tsx

@@ -0,0 +1,11 @@
+import Markdown, { importAll } from '../../../component/Markdown';
+
+export default class Page extends Markdown {
+  path="/packages/core/src/Swiper/README.md"
+  getMarkdown = async () => {
+    const md = await import('@uiw/react-native/lib/Swiper/README.md');
+    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
+    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
+    return md.default || md;
+  }
+}

website/src/routes/menus.ts

@@ -39,6 +39,7 @@ export const componentMenus: MenuData[] = [
   { path: "/components/quicklist", name: "QuicList 快速列表" },
   { path: "/components/card", name: "Card 卡片" },
   { path: "/components/noticebar", name: "NoticeBar 通告栏" },
+  { path: "/components/swiper", name: "Swiper 轮播图" },
   { divider: true, name: "Feedback" },
   { path: "/components/loader", name: "Loader 加载" },
   { path: "/components/modal", name: "Modal 模态框" },

website/src/routes/router.tsx

@@ -196,4 +196,7 @@ export const getRouterData = {
   '/components/stepper': {
     component: dynamicWrapper([], () => import('../pages/components/stepper')),
   },
+  '/components/swiper': {
+    component: dynamicWrapper([], () => import('../pages/components/swiper')),
+  },
 };