Skip to content

Commit 9876540

Browse files
matuanccsj
matuancc
and
sj
authored
feat: Add Tile & TransitionImage component. (#187)
* feat: 添加Android 环境安装(for Mac)文档 * flx: 更新Android 环境安装(for Mac)文档 * flx :优化Android(Mac)环境安装README.md * feat: 添加Tile和Image组件 * flx: 优化file组件 * flx: 修改语法错误 * flx: 添加tile和image文档 * flx: 组件image修改名称TransitionImage Co-authored-by: sj <songjie@jz-sh.cn>
1 parent 5ba1349 commit 9876540

File tree

13 files changed

+563
-0
lines changed

13 files changed

+563
-0
lines changed

‎example/examples/src/image/tileBG.png‎

217 KB
Loading

‎example/examples/src/routes.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,30 @@ export const stackPageData: Routes[] = [
354354
description: '轮播图',
355355
},
356356
},
357+
{
358+
name: 'Tile',
359+
component: require('./routes/Tile').default,
360+
params: {
361+
title: 'Tile',
362+
description: 'Tile 卡片',
363+
},
364+
},
365+
{
366+
name: 'TransitionImage',
367+
component: require('./routes/TransitionImage').default,
368+
params: {
369+
title: 'TransitionImage',
370+
description: 'TransitionImage 图片过渡',
371+
},
372+
},
373+
// {
374+
// name: 'Card',
375+
// component: require('./routes/Card').default,
376+
// params: {
377+
// title: 'Card 卡片',
378+
// description: 'QuickList 最基础的卡片容器，可承载文字、列表、图片、段落。',
379+
// },
380+
// },
357381
{
358382
name: 'Progress',
359383
component: require('./routes/Progress').default,

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import {SafeAreaView,} from 'react-native';
3+
import {Tile} from '@uiw/react-native';
4+
import Layout from '../../Layout';
5+
const TileDemo = (props: any) => {
6+
const {Header} = Layout;
7+
const {route} = props;
8+
const description = route.params.description;
9+
const title = route.params.title;
10+
11+
return (
12+
<SafeAreaView style={{flex: 1}}>
13+
<Header title={title} description={description} />
14+
<Tile
15+
imageSrc={require('../../image/tileBG.png')}
16+
// imageSrc={{uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg'}}
17+
imageProps={{resizeMode:'contain'}}
18+
containerStyle={{marginTop: 10}}
19+
imageContainerStyle={{backgroundColor:'#ccc'}}
20+
title="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
21+
titleStyle={{color: '#000', fontSize: 38, textAlign:'center',paddingTop: 190}}
22+
caption='mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm'
23+
captionStyle={{color: '#666', fontSize: 22, textAlign:'center',paddingHorizontal: 20}}
24+
iconContainerStyle={{marginTop: 0}}
25+
titleNumberOfLines={2}
26+
contentContainerStyle={{ height:320,}}
27+
icon={{name: 'uiw',color:'#333333', size: 38}}
28+
activeOpacity={0.9}
29+
onPress={()=> console.log('点击事件')}
30+
/>
31+
</SafeAreaView>
32+
);
33+
};
34+
export default TileDemo;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import {SafeAreaView,Dimensions ,ActivityIndicator} from 'react-native';
3+
import {TransitionImage} from '@uiw/react-native';
4+
import Layout from '../../Layout';
5+
const TransitionImageDemo = (props: any) => {
6+
const {Header} = Layout;
7+
const {route} = props;
8+
const description = route.params.description;
9+
const title = route.params.title;
10+
11+
return (
12+
<SafeAreaView style={{flex: 1}}>
13+
<Header title={title} description={description} />
14+
<TransitionImage
15+
source={{ uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg' }}
16+
style={{ width: 200, height: 200, }}
17+
PlaceholderContent={<ActivityIndicator />}
18+
placeholderStyle={{backgroundColor: 'red'}}
19+
containerStyle={{backgroundColor:'#eee',}}
20+
transition={true}
21+
transitionDuration={1000}
22+
onPress={()=> console.log('点击图片回调事件')}
23+
onLongPress={()=> console.log('长按组件回调事件')}
24+
/>
25+
26+
</SafeAreaView>
27+
);
28+
};
29+
export default TransitionImageDemo;

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
Tile 工具提示
2+
---
3+
4+
像卡片这样的磁贴是显示关于单个主题的相关内容的便捷方式
5+
6+
## 基础示例
7+
8+
```jsx
9+
import { Fragment } from 'react';
10+
import { Tile } from '@uiw/react-native';
11+
12+
13+
function Demo() {
14+
return (
15+
<Fragment>
16+
<Tile
17+
imageSrc={require('../../image/tileBG.png')}
18+
// imageSrc={{uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg'}}
19+
imageProps={{resizeMode:'contain'}}
20+
containerStyle={{marginTop: 10}}
21+
imageContainerStyle={{backgroundColor:'#ccc'}}
22+
title="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
23+
titleStyle={{color: '#000', fontSize: 38, textAlign:'center',paddingTop: 190}}
24+
caption='mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm'
25+
captionStyle={{color: '#666', fontSize: 22, textAlign:'center',paddingHorizontal: 20}}
26+
iconContainerStyle={{marginTop: 0}}
27+
titleNumberOfLines={2}
28+
contentContainerStyle={{ height:320,}}
29+
icon={{name: 'uiw',color:'#333333', size: 38}}
30+
activeOpacity={0.9}
31+
onPress={()=> console.log('点击事件')}
32+
/>
33+
</Fragment>
34+
);
35+
}
36+
```
37+
38+
39+
## TileProps
40+
41+
```ts
42+
import { TileProps } from 'react-native';
43+
44+
export interface TileProps extends TouchableOpacityProps{
45+
/** 标题内容（可选）*/
46+
title?: string;
47+
/** 标题样式 */
48+
titleStyle?: StyleProp<TextStyle>;
49+
/** 图标（可选）*/
50+
icon?: IconsProps;
51+
/** 图标样式（可选） */
52+
iconContainerStyle?: StyleProp<ViewStyle>;
53+
/** 文本内容（可选） */
54+
caption?: React.ReactNode;
55+
/** 文本内容样式（可选） */
56+
captionStyle?: StyleProp<TextStyle>;
57+
/** 底部容器样式（可选） */
58+
contentContainerStyle?: StyleProp<ViewStyle>;
59+
/** 图片链接（可选） */
60+
imageSrc?: ImageSourcePropType | string | number;
61+
/** 图片容器样式（可选） */
62+
imageContainerStyle?: StyleProp<ViewStyle>;
63+
/** 文字行数（可选） */
64+
titleNumberOfLines?: number;
65+
/** Tile样式（可选） */
66+
containerStyle?: StyleProp<ViewStyle>;
67+
/** Tile宽度（可选） */
68+
width?: number;
69+
/** Tile高度（可选）*/
70+
height?: number;
71+
/** Tile透明度（可选）*/
72+
activeOpacity?: number;
73+
/** 继承image的api */
74+
imageProps?: Partial<ImageProps>;
75+
}
76+
```

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React from 'react';
2+
import {
3+
View,
4+
Text,
5+
StyleSheet,
6+
StyleProp,
7+
ViewStyle,
8+
TextStyle,
9+
Dimensions,
10+
TouchableOpacity,
11+
TouchableOpacityProps,
12+
TouchableNativeFeedbackProps,
13+
ImageProps,
14+
ImageSourcePropType
15+
} from 'react-native';
16+
import Icon, { IconsProps } from '../Icon';
17+
import TransitionImage from '../TransitionImage';
18+
19+
export type TileProps = TouchableOpacityProps &
20+
TouchableNativeFeedbackProps & {
21+
/** 标题内容（可选）*/
22+
title?: string;
23+
/** 标题样式 */
24+
titleStyle?: StyleProp<TextStyle>;
25+
/** 图标（可选）*/
26+
icon?: IconsProps;
27+
/** 图标样式（可选） */
28+
iconContainerStyle?: StyleProp<ViewStyle>;
29+
/** 文本内容（可选） */
30+
caption?: React.ReactNode;
31+
/** 文本内容样式（可选） */
32+
captionStyle?: StyleProp<TextStyle>;
33+
/** 底部容器样式（可选） */
34+
contentContainerStyle?: StyleProp<ViewStyle>;
35+
/** 图片链接（可选） */
36+
imageSrc?: ImageSourcePropType | string | number;
37+
/** 图片容器样式（可选） */
38+
imageContainerStyle?: StyleProp<ViewStyle>;
39+
/** 文字行数（可选） */
40+
titleNumberOfLines?: number;
41+
/** Tile样式（可选） */
42+
containerStyle?: StyleProp<ViewStyle>;
43+
/** Tile宽度（可选） */
44+
width?: number;
45+
/** Tile高度（可选）*/
46+
height?: number;
47+
/** Tile透明度（可选）*/
48+
activeOpacity?: number;
49+
/** 继承image的api */
50+
imageProps?: Partial<ImageProps>;
51+
/** Custom ImageComponent for Tile. */
52+
ImageComponent?: typeof React.Component;
53+
}
54+
55+
const Tile = ({
56+
imageSrc,
57+
icon,
58+
title,
59+
onPress,
60+
caption,
61+
activeOpacity,
62+
captionStyle,
63+
containerStyle,
64+
titleStyle,
65+
iconContainerStyle,
66+
contentContainerStyle,
67+
imageContainerStyle,
68+
titleNumberOfLines,
69+
imageProps = {},
70+
width = Dimensions.get('window').width,
71+
height = width * 0.8,
72+
ImageComponent = TransitionImage,
73+
...attributes
74+
}: TileProps) => {
75+
return (
76+
<TouchableOpacity
77+
{...attributes}
78+
onPress={onPress}
79+
activeOpacity={activeOpacity}
80+
style={StyleSheet.flatten([
81+
{
82+
width: width,
83+
height: height,
84+
},
85+
containerStyle && containerStyle,
86+
])}
87+
>
88+
<ImageComponent
89+
source={imageSrc}
90+
containerStyle={StyleSheet.flatten([
91+
styles.imageContainer,
92+
imageContainerStyle && imageContainerStyle,
93+
])}
94+
style={{
95+
// ...StyleSheet.absoluteFillObject,
96+
alignItems: 'center',
97+
justifyContent: 'center',
98+
width,
99+
height: 200
100+
}}
101+
{...(imageProps as Partial<ImageProps>)}
102+
>
103+
<View
104+
style={StyleSheet.flatten([
105+
iconContainerStyle && iconContainerStyle,
106+
])}
107+
>
108+
{icon && <Icon {...icon} />}
109+
</View>
110+
</ImageComponent>
111+
112+
<View
113+
style={[StyleSheet.flatten([
114+
styles.contentContainer,
115+
contentContainerStyle && contentContainerStyle,
116+
]),
117+
{...StyleSheet.absoluteFillObject}
118+
]}
119+
>
120+
<Text
121+
testID="tileTitle"
122+
style={StyleSheet.flatten([styles.text, titleStyle && titleStyle])}
123+
numberOfLines={titleNumberOfLines}
124+
>
125+
{title}
126+
</Text>
127+
<Text
128+
testID="tileText"
129+
style={StyleSheet.flatten([styles.text, captionStyle && captionStyle])}
130+
numberOfLines={titleNumberOfLines}
131+
>
132+
{caption}
133+
</Text>
134+
</View>
135+
</TouchableOpacity>
136+
);
137+
};
138+
139+
const styles = StyleSheet.create({
140+
imageContainer: {},
141+
text: {
142+
backgroundColor: 'rgba(0,0,0,0)',
143+
marginBottom: 5,
144+
},
145+
contentContainer: {
146+
paddingTop: 15,
147+
paddingBottom: 5,
148+
paddingLeft: 15,
149+
paddingRight: 15,
150+
},
151+
iconContainer: {
152+
justifyContent: 'center',
153+
alignItems: 'center',
154+
alignSelf: 'center',
155+
},
156+
});
157+
158+
export default Tile

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
TransitionImage 图像
2+
---
3+
4+
直接替换标准 React Native Image 组件，该组件显示带有占位符和平滑图像加载转换的图像
5+
6+
## 基础示例
7+
8+
```jsx
9+
import { Fragment, ActivityIndicator } from 'react';
10+
import { TransitionImage } from '@uiw/react-native';
11+
12+
13+
function Demo() {
14+
return (
15+
<Fragment>
16+
<TransitionImage
17+
source={{ uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg' }}
18+
style={{ width: 200, height: 200, }}
19+
PlaceholderContent={<ActivityIndicator />}
20+
placeholderStyle={{backgroundColor: 'red'}}
21+
containerStyle={{backgroundColor:'#eee',}}
22+
transition={true}
23+
transitionDuration={1000}
24+
onPress={()=> console.log('点击图片回调事件')}
25+
onLongPress={()=> console.log('长按组件回调事件')}
26+
/>
27+
</Fragment>
28+
);
29+
}
30+
```
31+
32+
33+
## TransitionImage Props
34+
35+
```ts
36+
import { ImageProps } from 'react-native';
37+
import { TransitionImage } from '@uiw/react-native';
38+
39+
export interface TransitionImage extends ImageProps{
40+
/* 按下组件时的回调函数 */
41+
onPress?(): void;
42+
/* 长按组件时的回调函数 */
43+
onLongPress?(): void;
44+
/* 加载图像时要呈现的内容 */
45+
PlaceholderContent?: React.ReactElement<any>;
46+
/* 容器的附加样式（可选） */
47+
containerStyle?: StyleProp<ViewStyle>;
48+
/* 子容器的附加样式（可选） */
49+
childrenContainerStyle?: StyleProp<ViewStyle>;
50+
/* 占位符容器的附加样式（可选） */
51+
placeholderStyle?: StyleProp<ViewStyle>;
52+
/* 在图像加载时执行淡入淡出过渡 */
53+
transition?: boolean;
54+
/* 在图像加载时执行淡入淡出过渡 */
55+
transitionDuration?: number;
56+
}
57+
```

0 commit comments

Comments
 (0)