1
- import React from 'react' ;
1
+ import React , { FC } from 'react' ;
2
2
import {
3
3
View ,
4
4
Text ,
@@ -18,62 +18,62 @@ import TransitionImage from '../TransitionImage';
18
18
import { Theme } from '../theme' ;
19
19
import { useTheme } from '@shopify/restyle' ;
20
20
21
- export type TileProps = TouchableOpacityProps &
22
- TouchableNativeFeedbackProps & {
23
- /** 标题内容(可选)*/
24
- title ?: string ;
25
- /** 标题样式 */
26
- titleStyle ?: StyleProp < TextStyle > ;
27
- /** 图标(可选)*/
28
- icon ?: IconsProps ;
29
- /** 图标样式(可选) */
30
- iconContainerStyle ?: StyleProp < ViewStyle > ;
31
- /** 文本内容(可选) */
32
- caption ?: React . ReactNode ;
33
- /** 文本内容样式(可选) */
34
- captionStyle ?: StyleProp < TextStyle > ;
35
- /** 底部容器样式(可选) */
36
- contentContainerStyle ?: StyleProp < ViewStyle > ;
37
- /** 图片链接(可选) */
38
- imageSrc ?: ImageSourcePropType | string | number ;
39
- /** 图片容器样式(可选) */
40
- imageContainerStyle ?: StyleProp < ViewStyle > ;
41
- /** 文字行数(可选) */
42
- titleNumberOfLines ?: number ;
43
- /** Tile样式(可选) */
44
- containerStyle ?: StyleProp < ViewStyle > ;
45
- /** Tile宽度(可选) */
46
- width ?: number ;
47
- /** Tile高度(可选)*/
48
- height ?: number ;
49
- /** Tile透明度(可选)*/
50
- activeOpacity ?: number ;
51
- /** 继承image的api */
52
- imageProps ?: Partial < ImageProps > ;
53
- /** Custom ImageComponent for Tile. */
54
- ImageComponent ?: Function ;
55
- } ;
21
+ export interface TileProps extends TouchableOpacityProps , TouchableNativeFeedbackProps {
22
+ /** 标题内容(可选)*/
23
+ title ?: string ;
24
+ /** 标题样式 */
25
+ titleStyle ?: StyleProp < TextStyle > ;
26
+ /** 图标(可选)*/
27
+ icon ?: IconsProps ;
28
+ /** 图标样式(可选) */
29
+ iconContainerStyle ?: StyleProp < ViewStyle > ;
30
+ /** 文本内容(可选) */
31
+ caption ?: React . ReactNode ;
32
+ /** 文本内容样式(可选) */
33
+ captionStyle ?: StyleProp < TextStyle > ;
34
+ /** 底部容器样式(可选) */
35
+ contentContainerStyle ?: StyleProp < ViewStyle > ;
36
+ /** 图片链接(可选) */
37
+ imageSrc ?: ImageSourcePropType | string | number ;
38
+ /** 图片容器样式(可选) */
39
+ imageContainerStyle ?: StyleProp < ViewStyle > ;
40
+ /** 文字行数(可选) */
41
+ titleNumberOfLines ?: number ;
42
+ /** Tile样式(可选) */
43
+ containerStyle ?: StyleProp < ViewStyle > ;
44
+ /** Tile宽度(可选) */
45
+ width ?: number ;
46
+ /** Tile高度(可选)*/
47
+ height ?: number ;
48
+ /** Tile透明度(可选)*/
49
+ activeOpacity ?: number ;
50
+ /** 继承image的api */
51
+ imageProps ?: Partial < ImageProps > ;
52
+ /** Custom ImageComponent for Tile. */
53
+ ImageComponent ?: typeof TransitionImage ;
54
+ }
56
55
57
- const Tile = ( {
58
- imageSrc,
59
- icon,
60
- title,
61
- onPress,
62
- caption,
63
- activeOpacity,
64
- captionStyle,
65
- containerStyle,
66
- titleStyle,
67
- iconContainerStyle,
68
- contentContainerStyle,
69
- imageContainerStyle,
70
- titleNumberOfLines,
71
- imageProps = { } ,
72
- width = Dimensions . get ( 'window' ) . width ,
73
- height = width * 0.8 ,
74
- ImageComponent = TransitionImage ,
75
- ...attributes
76
- } : TileProps ) => {
56
+ const Tile : FC < TileProps > = ( props ) => {
57
+ const {
58
+ imageSrc,
59
+ icon,
60
+ title,
61
+ onPress,
62
+ caption,
63
+ activeOpacity,
64
+ captionStyle,
65
+ containerStyle,
66
+ titleStyle,
67
+ iconContainerStyle,
68
+ contentContainerStyle,
69
+ imageContainerStyle,
70
+ titleNumberOfLines,
71
+ imageProps = { } ,
72
+ width = Dimensions . get ( 'window' ) . width ,
73
+ height = width * 0.8 ,
74
+ ImageComponent = TransitionImage ,
75
+ ...attributes
76
+ } = props ;
77
77
const theme = useTheme < Theme > ( ) ;
78
78
const styles = createStyles ( {
79
79
titleColor : theme . colors . primary_text ,
@@ -93,7 +93,7 @@ const Tile = ({
93
93
] ) }
94
94
>
95
95
< ImageComponent
96
- source = { imageSrc }
96
+ source = { imageSrc as ImageSourcePropType }
97
97
containerStyle = { StyleSheet . flatten ( [ styles . imageContainer , imageContainerStyle && imageContainerStyle ] ) }
98
98
style = { {
99
99
// ...StyleSheet.absoluteFillObject,
0 commit comments