feat(ImageViewer):增加图片查看& 文档更新 (#368)

* fix(Divider):优化 gutter属性不生效问题 * feat(Divider): 增加分割线标题的位置调整功能 & 更新文档 * feat(Rating):增加自定义每项的提示信息 & 更新文档 * feat(Rating):增加只读功能 & 文档更新 * feat(Timeline): 增加改变时间轴内容相对位置功能 & 文档更新 * style(Timeline):Update Readme.md img * feat(Timeline):增加自定义图标 & 文档更新 * feat(Timeline):优化自定义图标 & 文档更新 * feat:新增Calendar 日历组件 * doc(website): Update Calendar Readme.md * feat(Calendar):增加农历及假期展示 && 文档更新 * feat(Calendar):增加假日文字颜色 * feat(Calendar):左上角按钮增加自定义跳转功能&文档更新 * feat(Calendar):优化农历假日及文字排版 * feat(Calendar):处理文字长度 * fix(Calendar):优化安卓文字排版 * feat(Calendar):增加农历详情展示 & 文档更新 * feat(DragDrawer):新增DragDrawer 拖曳抽屉 & 文档更新 * doc(website): 增加DragDrawer目录 * feat(DragDrawer):增加自定义图标 & 文档更新 * feat(DragDrawer): 增加抽屉自定义样式 & 文档更新 * feat(DragDrawer): 增加抽屉自定义样式 & 文档更新 * feat(DragDrawer):自定义抽屉样式 * doc(website): Update ios打包Readme.md * doc(website): Update TreeSelect Readme.md * doc(website): Update Readme.md * style(website): Update Readme.md * feat(TextArea):增加多行输入框 & 文档更新 * fix(DragDrawer):修改组件展示示例 * feat(TextArea):增加字数展示 && 文档更新 * doc(website): Update Android(Mac) 打包 Readme.md * fix(DragDrawer):修复内容无法滚动问题及文档更新 * feat(ImageViewer):增加图片查看& 文档更新 Co-authored-by: 杨楠 <[email protected]>
uiwjs · Jan 10, 2022 · a1c2657 · a1c2657
1 parent 08d64bc
commit a1c2657
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 0 deletions.
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -490,4 +490,12 @@ export const stackPageData: Routes[] = [
       description: '底部操作栏',
     },
   },
+  {
+    name: 'ImageViewer',
+    component: require('./routes/ImageViewer').default,
+    params: {
+      title: 'ImageViewer 图片查看',
+      description: '图片查看',
+    },
+  },
 ];
diff --git a/example/examples/src/routes/ImageViewer/index.tsx b/example/examples/src/routes/ImageViewer/index.tsx
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import {View, Text} from 'react-native';
+import Layout, {Container} from '../../Layout';
+import {ImageViewer} from '@uiw/react-native';
+import {ComProps} from '../../routes';
+
+const {Header, Body, Card, Footer} = Layout;
+
+export interface IndexProps extends ComProps {}
+
+export default class Index extends Component<IndexProps> {
+  render() {
+    const {route} = this.props;
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body style={{backgroundColor: '#fff'}}>
+            <Card title="基础使用">
+              <ImageViewer />
+            </Card>
+            <Card title="自定义图片">
+              <ImageViewer
+                height={100}
+                width={100}
+                src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg"
+              />
+            </Card>
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    );
+  }
+}
diff --git a/packages/core/src/ImageViewer/README.md b/packages/core/src/ImageViewer/README.md
@@ -0,0 +1,93 @@
+ImageViewer 图片查看
+---
+
+![](https://user-images.githubusercontent.com/66067296/148637929-a8ef7878-c7b6-4af6-af9e-f610cf96ab45.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
+
+可自定义拖曳抽屉高度。
+
+### 基础示例
+
+```jsx
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+import Layout, { Container } from '../../Layout';
+import { ImageViewer } from '@uiw/react-native';
+import { ComProps } from '../../routes';
+
+const { Header, Body, Card, Footer } = Layout;
+
+export interface IndexProps extends ComProps { }
+
+export default class Index extends Component<IndexProps> {
+  render() {
+    const { route } = this.props;
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body style={{ backgroundColor: '#fff' }}>
+            <Card title="基础使用">
+              <ImageViewer />
+            </Card>
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    );
+  }
+}
+```
+
+### 自定义图片
+
+```jsx
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+import Layout, { Container } from '../../Layout';
+import { ImageViewer } from '@uiw/react-native';
+import { ComProps } from '../../routes';
+
+const { Header, Body, Card, Footer } = Layout;
+
+export interface IndexProps extends ComProps { }
+
+export default class Index extends Component<IndexProps> {
+  render() {
+    const { route } = this.props;
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body style={{ backgroundColor: '#fff' }}>
+            <Card title="自定义图片">
+              <ImageViewer
+                height={100}
+                width={100}
+                src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg"
+              />
+            </Card>
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    );
+  }
+}
+```
+
+### props
+
+```ts
+export interface ImageViewerProps extends ViewProps {
+  /** 图片宽度 */
+  width?: number,
+  /** 图片高度 */
+  height?: number,
+  /** 图像源（远程URL或本地文件资源 */
+  src?: string | number;
+}
+```
diff --git a/packages/core/src/ImageViewer/index.tsx b/packages/core/src/ImageViewer/index.tsx
@@ -0,0 +1,78 @@
+import { number } from 'prop-types';
+import React, { useState, useMemo, useRef } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  ViewProps,
+  ViewStyle,
+  Dimensions,
+  View,
+  Text,
+  StyleProp,
+  Image,
+  Animated,
+} from 'react-native';
+import TransitionImage, { ImageProps } from '../TransitionImage';
+import MaskLayer, { MaskLayerProps } from '../MaskLayer';
+import { ActivityIndicator } from 'react-native';
+export let ImageMainWidth = Dimensions.get('window').width;
+export let ImageMainHeight = Dimensions.get('window').height;
+
+const defaultImage = 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg';
+
+export interface ImageViewerProps extends ViewProps {
+  /** 图片宽度 */
+  width?: number;
+  /** 图片高度 */
+  height?: number;
+  /** 图像源（远程URL或本地文件资源 */
+  src?: string | number;
+}
+
+function ImageViewer(props: ImageViewerProps) {
+  const { width = 150, height = 150, src = defaultImage, ...others } = props;
+  const [visible, setVisible] = useState(false);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useMemo(() => {
+    if (!visible) {
+      fadeAnim.setValue(0);
+      return;
+    }
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 600,
+      useNativeDriver: true,
+    }).start();
+  }, [visible]);
+
+  return (
+    <View style={{}}>
+      <TransitionImage
+        style={{ width: width, height: height }}
+        onPress={() => setVisible(true)}
+        source={typeof src === 'number' ? src : { uri: src as string }}
+        PlaceholderContent={<ActivityIndicator />}
+        transition={true}
+        transitionDuration={500}
+      />
+      <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
+        <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
+          <Image
+            style={{ width: '100%', height: '100%', resizeMode: 'contain' }}
+            source={typeof src === 'number' ? src : { uri: src as string }}
+          />
+        </Animated.View>
+      </MaskLayer>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    marginTop: ImageMainHeight / 3 - 20,
+    height: ImageMainHeight / 3 - 20,
+  },
+});
+
+export default ImageViewer;
diff --git a/packages/core/src/TextArea/README.md b/packages/core/src/TextArea/README.md
@@ -205,6 +205,8 @@ const styles = StyleSheet.create({
 
 ### props
 
+组件继承 [`TextInput`](https://www.react-native.cn/docs/textinput)
+
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
 | `textAlignVertical` | 文本位置 | `"top" | "center" | "auto" | "bottom"` | `top` |

diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -116,6 +116,8 @@ export { default as TextArea } from './TextArea';
 export * from './TextArea';
 export { default as ActionBar } from './ActionBar';
 export * from './ActionBar';
+export { default as ImageViewer } from './ImageViewer';
+export * from './ImageViewer';
 /**
  * Typography
  */

diff --git a/website/src/pages/components/imageViewer/index.tsx b/website/src/pages/components/imageViewer/index.tsx
@@ -0,0 +1,11 @@
+import Markdown, { importAll } from '../../../component/Markdown';
+
+export default class Page extends Markdown {
+  path = '/packages/core/src/ImageViewer/README.md';
+  getMarkdown = async () => {
+    const md = await import('@uiw/react-native/lib/ImageViewer/README.md');
+    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
+    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
+    return md.default || md;
+  };
+}
diff --git a/website/src/routes/menus.ts b/website/src/routes/menus.ts
@@ -62,6 +62,7 @@ export const componentMenus: MenuData[] = [
   { path: '/components/treeSelect', name: 'TreeSelect 级联选择器' },
   { path: '/components/dragdrawer', name: 'Dragdrawer 拖拽抽屉' },
   { path: '/components/textarea', name: 'TextArea 多行输入框' },
+  { path: '/components/imageViewer', name: 'ImageViewer 图片查看' },
   { divider: true, name: '其它' },
   { href: 'https://github.com/uiwjs/react-native-alipay', name: 'Alipay 支付宝', target: '__blank' },
   {

diff --git a/website/src/routes/router.tsx b/website/src/routes/router.tsx
@@ -285,6 +285,10 @@ export const routeData = [
         path: '/components/textarea',
         component: lazy(() => import('../pages/components/textarea')),
       },
+      {
+        path: '/components/imageViewer',
+        component: lazy(() => import('../pages/components/imageViewer')),
+      },
       {
         path: '/docs/changelog',
         component: lazy(() => import('../pages/docs/changelog')),