Merge branch 'dev' of github.com:uiwjs/react-native-uiw into dev

uiwjs · Apr 22, 2023 · 8579b8e · 8579b8e
2 parents a72904e + c99be70
commit 8579b8e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 27 deletions.
diff --git a/example/examples/src/routes/TransitionImage/index.tsx b/example/examples/src/routes/TransitionImage/index.tsx
@@ -3,7 +3,11 @@ import {SafeAreaView, Dimensions, ActivityIndicator} from 'react-native';
 import {TransitionImage} from '@uiw/react-native';
 import Layout from '../../Layout';
 const TransitionImageDemo = (props: any) => {
-  const {Header, Body} = Layout;
+  const [state, setState] = React.useState<any>({
+    url1: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d',
+    url3: undefined,
+  });
+  const {Header, Body, Card} = Layout;
   const {route} = props;
   const description = route.params.description;
   const title = route.params.title;
@@ -12,19 +16,26 @@ const TransitionImageDemo = (props: any) => {
     <SafeAreaView style={{flex: 1}}>
       <Header title={title} description={description} />
       <Body style={{paddingLeft: 16, paddingRight: 16}}>
-        <TransitionImage
-          source={{
-            uri: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d',
-          }}
-          style={{width: 200, height: 200}}
-          PlaceholderContent={<ActivityIndicator />}
-          // placeholderStyle={{backgroundColor: 'red'}}
-          // containerStyle={{backgroundColor: '#eee'}}
-          transition={true}
-          transitionDuration={1000}
-          onPress={() => console.log('点击图片回调事件')}
-          onLongPress={() => console.log('长按组件回调事件')}
-        />
+        <Card title="基础用法">
+          <TransitionImage
+            source={{uri: state.url1}}
+            style={{width: 100, height: 100}}
+            PlaceholderContent={<ActivityIndicator />}
+            transition={true}
+            transitionDuration={1000}
+            onPress={() => console.log('点击图片回调事件')}
+            onLongPress={() => console.log('长按组件回调事件')}
+          />
+        </Card>
+        <Card title="加载失败">
+          <TransitionImage
+            source={{uri: state.url3}}
+            style={{width: 100, height: 100}}
+            PlaceholderContent={<ActivityIndicator />}
+            transition={true}
+            transitionDuration={1000}
+          />
+        </Card>
       </Body>
     </SafeAreaView>
   );

diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "@babel/plugin-proposal-decorators": "~7.20.7",
     "@babel/preset-env": "~7.20.2",
     "@babel/preset-typescript": "~7.18.6",
-    "babel-preset-react-native": "4.0.2",
+    "babel-preset-react-native": "4.0.1",
     "fs-extra": "~10.1.0",
     "metro-react-native-babel-preset": "0.73.6",
     "react": "18.0.0",

diff --git a/packages/core/src/Form/comps/tree.tsx b/packages/core/src/Form/comps/tree.tsx
@@ -100,6 +100,7 @@ const FormTree = ({
       <Modal visible={visible} placement="bottom" onClosed={() => setVisible(false)}>
         <ScrollView style={{ height: 400 }}>
           <Tree
+            defaultCheckedKeys={value}
             treeData={options}
             defaultExpandAll
             onCheck={(value: any) => {

diff --git a/packages/core/src/Swiper/README.md b/packages/core/src/Swiper/README.md
@@ -38,4 +38,4 @@ export default SwiperDemo
 | borderRadius | 圆角边框       | Number    |  0 |
 | autoplay     | 是否开启定时器  | Boolean   | true|
 | dotStyle     | 圆点类型 ( dot : 圆点， block : 方块 )       | String    | dot |
-| loading      | 加载状态  | Boolean   | false |
+| loading      | 加载中状态  | Boolean   | false |
diff --git a/packages/core/src/Swiper/index.tsx b/packages/core/src/Swiper/index.tsx
@@ -17,22 +17,23 @@ export interface dataSourceType {
 }
 export type dotType = 'dot' | 'block';
 export interface SwiperProps {
-  // 数据源
+  /** 图片数据源 */
   dataSource?: dataSourceType[];
-  // 轮播图宽度
+  /** 轮播图宽度 */
   width?: number;
-  // 轮播图高度
+  /** 轮播图高度 */
   height?: number;
-  // 播放时间
+  /** 播放时间 */
   time?: number;
-  // 圆角边框
+  /** 圆角边框 */
   borderRadius?: number;
-  // 是否开启自动播放
+  /** 是否开启自动播放 */
   autoplay?: boolean;
-  // 指示点样式 dot: 圆点  block: 方块
+  /** 指示点样式 dot: 圆点  block: 方块 */
   dotStyle?: dotType;
-  // 初始位置
+  /** 初始位置 */
   index?: number;
+  /** 是否加载中 */
   loading?: boolean;
 }
 const Swiper = (porps: SwiperProps) => {
@@ -105,7 +106,12 @@ const Swiper = (porps: SwiperProps) => {
     let offSetX = e.nativeEvent.contentOffset.x;
     let mentWidth = e.nativeEvent.layoutMeasurement.width;
     let page = offSetX / mentWidth;
-
+    // 第一张图片
+    if (page === 0 && offSetX <= 0) {
+      setCurIndex(dataSource.length - 1);
+      scrollToRef.current.scrollTo({ x: dataSource.length * width, y: 0, animated: false }); // 让 ScrollView 定位到最后一张图片
+    }
+    // 最后一张图片
     if (page === dataSource.length) {
       setCurIndex(0);
       scrollToRef.current.scrollTo({ x: 0, y: 0, animated: false });

diff --git a/packages/core/src/TransitionImage/README.md b/packages/core/src/TransitionImage/README.md
@@ -19,7 +19,7 @@ function Demo() {
     <Fragment>
        <TransitionImage
         source={{  uri: 'https://avatars.githubusercontent.com/u/24369183?v=4' }}
-        style={{ width: 200, height: 200, }}
+        style={{ width: 100, height: 100, }}
         onPress={()=> console.log('点击图片回调事件')}
         onLongPress={()=> console.log('长按组件回调事件')}
       />
@@ -42,7 +42,7 @@ function Demo() {
     <Fragment>
        <TransitionImage
         source={{  uri: 'https://avatars.githubusercontent.com/u/24369183?v=4' }}
-        style={{ width: 200, height: 200, }}
+        style={{ width: 100, height: 100, }}
         PlaceholderContent={<ActivityIndicator />}
         placeholderStyle={{backgroundColor: '#000a'}}
         containerStyle={{backgroundColor:'#eee',}}
@@ -57,6 +57,31 @@ function Demo() {
 export default Demo
 ```
 
+### 失败加载
+
+```jsx mdx:preview&background=#bebebe29
+import React, { useState } from 'react';
+import { Fragment } from 'react';
+import { TransitionImage } from '@uiw/react-native';
+import { ActivityIndicator } from 'react-native';
+
+function Demo() {
+  return (
+    <Fragment>
+       <TransitionImage
+        source={{  uri: undefined }}
+        style={{ width: 100, height: 100 }}
+        placeholderStyle={{backgroundColor: '#000a'}}
+        containerStyle={{backgroundColor:'#eee',}}
+        transition={true}
+        transitionDuration={1000}
+      />
+    </Fragment>
+  );
+}
+export default Demo
+```
+
 ### Props
 
 ```js