doc(TransImage): 增加失败加载文档

uiwjs · Apr 21, 2023 · 4a909a9 · 4a909a9
1 parent 79a8031
commit 4a909a9
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 16 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/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