Skip to content

Commit 3ef9612

Browse files
panbibipanbibi
committed
refactor(TransitionImage): 使用函数组件替换Class组件
1 parent 74da38e commit 3ef9612

File tree

1 file changed

+75
-77
lines changed

1 file changed

+75
-77
lines changed

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

Lines changed: 75 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import {
33
Animated,
44
Image as ImageNative,
@@ -29,102 +29,100 @@ type ImageState = {
2929
placeholderOpacity: Animated.Value;
3030
};
3131

32-
export default class TransitionImage extends React.Component<ImageProps & Partial<ImageProps>, ImageState> {
33-
static displayName = 'Image';
34-
static getSize = ImageNative.getSize;
35-
static getSizeWithHeaders = ImageNative.getSizeWithHeaders;
36-
static prefetch = ImageNative.prefetch;
37-
static abortPrefetch = ImageNative.abortPrefetch;
38-
static queryCache = ImageNative.queryCache;
39-
static resolveAssetSource = ImageNative.resolveAssetSource;
40-
41-
state = {
32+
export default function TransitionImage(props: ImageProps & Partial<ImageProps>) {
33+
const [state, _] = useState<ImageState>({
4234
placeholderOpacity: new Animated.Value(1),
43-
};
35+
});
4436

45-
onLoad = (e: any) => {
46-
const { transition, onLoad, transitionDuration } = this.props;
37+
const onLoad = (e: any) => {
38+
const { transition, onLoad, transitionDuration } = props;
4739
if (!transition) {
48-
this.state.placeholderOpacity.setValue(0);
40+
state.placeholderOpacity.setValue(0);
4941
return;
5042
}
5143

52-
Animated.timing(this.state.placeholderOpacity, {
44+
Animated.timing(state.placeholderOpacity, {
5345
toValue: 0,
5446
duration: transitionDuration,
5547
useNativeDriver: true,
5648
}).start();
5749
onLoad && onLoad(e);
5850
};
5951

60-
render() {
61-
const {
62-
onPress,
63-
onLongPress,
64-
Component = onPress || onLongPress ? TouchableOpacity : View,
65-
placeholderStyle,
66-
PlaceholderContent,
67-
containerStyle,
68-
childrenContainerStyle = null,
69-
style = {},
70-
ImageComponent = ImageNative,
71-
children,
72-
...attributes
73-
} = this.props;
52+
const {
53+
onPress,
54+
onLongPress,
55+
Component = onPress || onLongPress ? TouchableOpacity : View,
56+
placeholderStyle,
57+
PlaceholderContent,
58+
containerStyle,
59+
childrenContainerStyle = null,
60+
style = {},
61+
ImageComponent = ImageNative,
62+
children,
63+
...attributes
64+
} = props;
7465

75-
const hasImage = Boolean(attributes.source);
76-
const { width, height, ...styleProps } = StyleSheet.flatten(style);
66+
const hasImage = Boolean(attributes.source);
67+
const { width, height, ...styleProps } = StyleSheet.flatten(style);
7768

78-
return (
79-
<Component
80-
onPress={onPress}
81-
onLongPress={onLongPress}
82-
accessibilityIgnoresInvertColors={true}
83-
style={StyleSheet.flatten([styles.container, containerStyle])}
84-
>
85-
<ImageComponent
86-
testID="RNE__Image"
87-
transition={true}
88-
transitionDuration={360}
89-
{...attributes}
90-
onLoad={this.onLoad}
91-
style={StyleSheet.flatten([
92-
StyleSheet.absoluteFill,
93-
{
94-
width: width,
95-
height: height,
96-
} as StyleProp<ImageStyle>,
97-
styleProps,
98-
])}
99-
/>
69+
return (
70+
<Component
71+
onPress={onPress}
72+
onLongPress={onLongPress}
73+
accessibilityIgnoresInvertColors={true}
74+
style={StyleSheet.flatten([styles.container, containerStyle])}
75+
>
76+
<ImageComponent
77+
testID="RNE__Image"
78+
transition={true}
79+
transitionDuration={360}
80+
{...attributes}
81+
onLoad={onLoad}
82+
style={StyleSheet.flatten([
83+
StyleSheet.absoluteFill,
84+
{
85+
width: width,
86+
height: height,
87+
} as StyleProp<ImageStyle>,
88+
styleProps,
89+
])}
90+
/>
10091

101-
<Animated.View
102-
pointerEvents={hasImage ? 'none' : 'auto'}
103-
accessibilityElementsHidden={hasImage}
104-
importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
105-
style={[
106-
styles.placeholderContainer,
107-
{
108-
opacity: hasImage ? this.state.placeholderOpacity : 1,
109-
},
110-
]}
92+
<Animated.View
93+
pointerEvents={hasImage ? 'none' : 'auto'}
94+
accessibilityElementsHidden={hasImage}
95+
importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
96+
style={[
97+
styles.placeholderContainer,
98+
{
99+
opacity: hasImage ? state.placeholderOpacity : 1,
100+
},
101+
]}
102+
>
103+
<View
104+
testID="RNE__Image__placeholder"
105+
style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
111106
>
112-
<View
113-
testID="RNE__Image__placeholder"
114-
style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
115-
>
116-
{PlaceholderContent}
117-
</View>
118-
</Animated.View>
119-
120-
<View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
121-
{children}
107+
{PlaceholderContent}
122108
</View>
123-
</Component>
124-
);
125-
}
109+
</Animated.View>
110+
111+
<View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
112+
{children}
113+
</View>
114+
</Component>
115+
);
126116
}
127117

118+
TransitionImage.displayName = 'Image';
119+
TransitionImage.getSize = ImageNative.getSize;
120+
TransitionImage.getSizeWithHeaders = ImageNative.getSizeWithHeaders;
121+
TransitionImage.prefetch = ImageNative.prefetch;
122+
TransitionImage.abortPrefetch = ImageNative.abortPrefetch;
123+
TransitionImage.queryCache = ImageNative.queryCache;
124+
TransitionImage.resolveAssetSource = ImageNative.resolveAssetSource;
125+
128126
const styles = StyleSheet.create({
129127
container: {
130128
backgroundColor: 'transparent',

0 commit comments

Comments
 (0)