Skip to content

Commit a1c2657

Browse files
Amber-Nan杨楠
Amber-Nan
and
杨楠
authored
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: 杨楠 <yangnan@nihaosi.com>
1 parent 08d64bc commit a1c2657

File tree

9 files changed

+236
-0
lines changed

9 files changed

+236
-0
lines changed

‎example/examples/src/routes.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -490,4 +490,12 @@ export const stackPageData: Routes[] = [
490490
description: '底部操作栏',
491491
},
492492
},
493+
{
494+
name: 'ImageViewer',
495+
component: require('./routes/ImageViewer').default,
496+
params: {
497+
title: 'ImageViewer 图片查看',
498+
description: '图片查看',
499+
},
500+
},
493501
];

‎example/examples/src/routes/ImageViewer/index.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, {Component} from 'react';
2+
import {View, Text} from 'react-native';
3+
import Layout, {Container} from '../../Layout';
4+
import {ImageViewer} from '@uiw/react-native';
5+
import {ComProps} from '../../routes';
6+
7+
const {Header, Body, Card, Footer} = Layout;
8+
9+
export interface IndexProps extends ComProps {}
10+
11+
export default class Index extends Component<IndexProps> {
12+
render() {
13+
const {route} = this.props;
14+
const description = route.params.description;
15+
const title = route.params.title;
16+
return (
17+
<Container>
18+
<Layout>
19+
<Header title={title} description={description} />
20+
<Body style={{backgroundColor: '#fff'}}>
21+
<Card title="基础使用">
22+
<ImageViewer />
23+
</Card>
24+
<Card title="自定义图片">
25+
<ImageViewer
26+
height={100}
27+
width={100}
28+
src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg"
29+
/>
30+
</Card>
31+
</Body>
32+
<Footer />
33+
</Layout>
34+
</Container>
35+
);
36+
}
37+
}

‎packages/core/src/ImageViewer/README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
ImageViewer 图片查看
2+
---
3+
4+
![](https://user-images.githubusercontent.com/66067296/148637929-a8ef7878-c7b6-4af6-af9e-f610cf96ab45.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
5+
6+
可自定义拖曳抽屉高度。
7+
8+
### 基础示例
9+
10+
```jsx
11+
import React, { Component } from 'react';
12+
import { View, Text } from 'react-native';
13+
import Layout, { Container } from '../../Layout';
14+
import { ImageViewer } from '@uiw/react-native';
15+
import { ComProps } from '../../routes';
16+
17+
const { Header, Body, Card, Footer } = Layout;
18+
19+
export interface IndexProps extends ComProps { }
20+
21+
export default class Index extends Component<IndexProps> {
22+
render() {
23+
const { route } = this.props;
24+
const description = route.params.description;
25+
const title = route.params.title;
26+
return (
27+
<Container>
28+
<Layout>
29+
<Header title={title} description={description} />
30+
<Body style={{ backgroundColor: '#fff' }}>
31+
<Card title="基础使用">
32+
<ImageViewer />
33+
</Card>
34+
</Body>
35+
<Footer />
36+
</Layout>
37+
</Container>
38+
);
39+
}
40+
}
41+
```
42+
43+
### 自定义图片
44+
45+
```jsx
46+
import React, { Component } from 'react';
47+
import { View, Text } from 'react-native';
48+
import Layout, { Container } from '../../Layout';
49+
import { ImageViewer } from '@uiw/react-native';
50+
import { ComProps } from '../../routes';
51+
52+
const { Header, Body, Card, Footer } = Layout;
53+
54+
export interface IndexProps extends ComProps { }
55+
56+
export default class Index extends Component<IndexProps> {
57+
render() {
58+
const { route } = this.props;
59+
const description = route.params.description;
60+
const title = route.params.title;
61+
return (
62+
<Container>
63+
<Layout>
64+
<Header title={title} description={description} />
65+
<Body style={{ backgroundColor: '#fff' }}>
66+
<Card title="自定义图片">
67+
<ImageViewer
68+
height={100}
69+
width={100}
70+
src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg"
71+
/>
72+
</Card>
73+
</Body>
74+
<Footer />
75+
</Layout>
76+
</Container>
77+
);
78+
}
79+
}
80+
```
81+
82+
### props
83+
84+
```ts
85+
export interface ImageViewerProps extends ViewProps {
86+
/** 图片宽度 */
87+
width?: number,
88+
/** 图片高度 */
89+
height?: number,
90+
/** 图像源（远程URL或本地文件资源 */
91+
src?: string | number;
92+
}
93+
```

‎packages/core/src/ImageViewer/index.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { number } from 'prop-types';
2+
import React, { useState, useMemo, useRef } from 'react';
3+
import {
4+
StyleSheet,
5+
TouchableOpacity,
6+
ViewProps,
7+
ViewStyle,
8+
Dimensions,
9+
View,
10+
Text,
11+
StyleProp,
12+
Image,
13+
Animated,
14+
} from 'react-native';
15+
import TransitionImage, { ImageProps } from '../TransitionImage';
16+
import MaskLayer, { MaskLayerProps } from '../MaskLayer';
17+
import { ActivityIndicator } from 'react-native';
18+
export let ImageMainWidth = Dimensions.get('window').width;
19+
export let ImageMainHeight = Dimensions.get('window').height;
20+
21+
const defaultImage = 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg';
22+
23+
export interface ImageViewerProps extends ViewProps {
24+
/** 图片宽度 */
25+
width?: number;
26+
/** 图片高度 */
27+
height?: number;
28+
/** 图像源（远程URL或本地文件资源 */
29+
src?: string | number;
30+
}
31+
32+
function ImageViewer(props: ImageViewerProps) {
33+
const { width = 150, height = 150, src = defaultImage, ...others } = props;
34+
const [visible, setVisible] = useState(false);
35+
const fadeAnim = useRef(new Animated.Value(0)).current;
36+
37+
useMemo(() => {
38+
if (!visible) {
39+
fadeAnim.setValue(0);
40+
return;
41+
}
42+
Animated.timing(fadeAnim, {
43+
toValue: 1,
44+
duration: 600,
45+
useNativeDriver: true,
46+
}).start();
47+
}, [visible]);
48+
49+
return (
50+
<View style={{}}>
51+
<TransitionImage
52+
style={{ width: width, height: height }}
53+
onPress={() => setVisible(true)}
54+
source={typeof src === 'number' ? src : { uri: src as string }}
55+
PlaceholderContent={<ActivityIndicator />}
56+
transition={true}
57+
transitionDuration={500}
58+
/>
59+
<MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
60+
<Animated.View style={[styles.content, { opacity: fadeAnim }]}>
61+
<Image
62+
style={{ width: '100%', height: '100%', resizeMode: 'contain' }}
63+
source={typeof src === 'number' ? src : { uri: src as string }}
64+
/>
65+
</Animated.View>
66+
</MaskLayer>
67+
</View>
68+
);
69+
}
70+
71+
const styles = StyleSheet.create({
72+
content: {
73+
marginTop: ImageMainHeight / 3 - 20,
74+
height: ImageMainHeight / 3 - 20,
75+
},
76+
});
77+
78+
export default ImageViewer;

‎packages/core/src/TextArea/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,8 @@ const styles = StyleSheet.create({
205205

206206
### props
207207

208+
组件继承 [`TextInput`](https://www.react-native.cn/docs/textinput)
209+
208210
| 参数 | 说明 | 类型 | 默认值 |
209211
|------|------|-----|------|
210212
| `textAlignVertical` | 文本位置 | `"top" | "center" | "auto" | "bottom"` | `top` |

‎packages/core/src/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ export { default as TextArea } from './TextArea';
116116
export * from './TextArea';
117117
export { default as ActionBar } from './ActionBar';
118118
export * from './ActionBar';
119+
export { default as ImageViewer } from './ImageViewer';
120+
export * from './ImageViewer';
119121
/**
120122
* Typography
121123
*/

‎website/src/pages/components/imageViewer/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Markdown, { importAll } from '../../../component/Markdown';
2+
3+
export default class Page extends Markdown {
4+
path = '/packages/core/src/ImageViewer/README.md';
5+
getMarkdown = async () => {
6+
const md = await import('@uiw/react-native/lib/ImageViewer/README.md');
7+
// 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
8+
importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
9+
return md.default || md;
10+
};
11+
}

‎website/src/routes/menus.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export const componentMenus: MenuData[] = [
6262
{ path: '/components/treeSelect', name: 'TreeSelect 级联选择器' },
6363
{ path: '/components/dragdrawer', name: 'Dragdrawer 拖拽抽屉' },
6464
{ path: '/components/textarea', name: 'TextArea 多行输入框' },
65+
{ path: '/components/imageViewer', name: 'ImageViewer 图片查看' },
6566
{ divider: true, name: '其它' },
6667
{ href: 'https://github.com/uiwjs/react-native-alipay', name: 'Alipay 支付宝', target: '__blank' },
6768
{

‎website/src/routes/router.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,10 @@ export const routeData = [
285285
path: '/components/textarea',
286286
component: lazy(() => import('../pages/components/textarea')),
287287
},
288+
{
289+
path: '/components/imageViewer',
290+
component: lazy(() => import('../pages/components/imageViewer')),
291+
},
288292
{
289293
path: '/docs/changelog',
290294
component: lazy(() => import('../pages/docs/changelog')),

0 commit comments

Comments
 (0)