Skip to content

Commit 0995b9b

Browse files
GreatQin1GreatQin1
committed
“添加Gallery.harmony.js文件
1 parent a9f70af commit 0995b9b

File tree

5 files changed

+303
-296
lines changed

5 files changed

+303
-296
lines changed

‎CHANGES.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11

22
## v2.1.5-0.0.1
33

4-
1.修改源库依赖
5-
2.添加harmonyOS目录
4+
1.将ViewPropTypes接口替换为PropTypes
5+
2.判断UIManager是否存在measure
6+
3.修改ViewTransformer普通函数改为箭头函数，改变this的指向问题
67

78
react-native-openharmony: 0.72.20
89
DevEco Studio: 5.0.3.200

‎harmony/.gitkeep

Whitespace-only changes.

‎package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
{
2-
"name": "react-native-image-gallery",
2+
"name": "@react-native-oh-tpl/react-native-image-gallery",
33
"version": "2.1.5-0.0.1",
44
"description": "Pure JavaScript image gallery component for iOS and Android",
5-
"main": "src/Gallery.js",
5+
"main": "src/Gallery",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},
9+
"harmony": {
10+
"alias": "react-native-image-gallery"
11+
},
912
"repository": {
1013
"type": "git",
1114
"url": "git+https://github.com/archriss/react-native-image-gallery.git"
@@ -19,7 +22,8 @@
1922
"dependencies": {
2023
"prop-types": "^15.6.0",
2124
"react-mixin": "^3.0.5",
22-
"react-timer-mixin": "^0.13.3"
25+
"react-timer-mixin": "^0.13.3",
26+
"react-native-image-gallery": "^2.1.5"
2327
},
2428
"peerDependencies": {
2529
"react": "*",

‎src/Gallery.harmony.js

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
import React, { PureComponent } from 'react';
2+
import { View } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import { createResponder } from './libraries/GestureResponder';
5+
import TransformableImage from './libraries/TransformableImage';
6+
import ViewPager from './libraries/ViewPager';
7+
8+
const DEFAULT_FLAT_LIST_PROPS = {
9+
windowSize: 3
10+
};
11+
12+
export default class Gallery extends PureComponent {
13+
static propTypes = {
14+
...View.propTypes,
15+
images: PropTypes.arrayOf(PropTypes.object),
16+
initialPage: PropTypes.number,
17+
scrollViewStyle: PropTypes ? PropTypes.object : View.propTypes.style,
18+
pageMargin: PropTypes.number,
19+
onPageSelected: PropTypes.func,
20+
onPageScrollStateChanged: PropTypes.func,
21+
onPageScroll: PropTypes.func,
22+
onSingleTapConfirmed: PropTypes.func,
23+
onGalleryStateChanged: PropTypes.func,
24+
onLongPress: PropTypes.func,
25+
removeClippedSubviews: PropTypes.bool,
26+
imageComponent: PropTypes.func,
27+
errorComponent: PropTypes.func,
28+
flatListProps: PropTypes.object
29+
};
30+
31+
static defaultProps = {
32+
removeClippedSubviews: true,
33+
imageComponent: undefined,
34+
scrollViewStyle: {},
35+
flatListProps: DEFAULT_FLAT_LIST_PROPS
36+
};
37+
38+
imageRefs = new Map();
39+
activeResponder = undefined;
40+
firstMove = true;
41+
currentPage = 0;
42+
pageCount = 0;
43+
gestureResponder = undefined;
44+
45+
constructor (props) {
46+
super(props);
47+
48+
this.renderPage = this.renderPage.bind(this);
49+
this.onPageSelected = this.onPageSelected.bind(this);
50+
this.onPageScrollStateChanged = this.onPageScrollStateChanged.bind(this);
51+
this.getViewPagerInstance = this.getViewPagerInstance.bind(this);
52+
this.getCurrentImageTransformer = this.getCurrentImageTransformer.bind(this);
53+
this.getImageTransformer = this.getImageTransformer.bind(this);
54+
this.getViewPagerInstance = this.getViewPagerInstance.bind(this);
55+
this.activeImageResponder = this.activeImageResponder.bind(this);
56+
}
57+
58+
componentWillMount () {
59+
let onResponderReleaseOrTerminate = (evt, gestureState) => {
60+
if (this.activeResponder) {
61+
if (this.activeResponder === this.viewPagerResponder &&
62+
!this.shouldScrollViewPager(evt, gestureState) &&
63+
Math.abs(gestureState.vx) > 0.5) {
64+
this.activeResponder.onEnd(evt, gestureState, true);
65+
this.getViewPagerInstance().flingToPage(this.currentPage, gestureState.vx);
66+
} else {
67+
this.activeResponder.onEnd(evt, gestureState);
68+
}
69+
this.activeResponder = null;
70+
}
71+
this.firstMove = true;
72+
this.props.onGalleryStateChanged && this.props.onGalleryStateChanged(true);
73+
};
74+
75+
this.gestureResponder = createResponder({
76+
onStartShouldSetResponderCapture: (evt, gestureState) => true,
77+
onStartShouldSetResponder: (evt, gestureState) => true,
78+
onResponderGrant: this.activeImageResponder,
79+
onResponderMove: (evt, gestureState) => {
80+
if (this.firstMove) {
81+
this.firstMove = false;
82+
if (this.shouldScrollViewPager(evt, gestureState)) {
83+
this.activeViewPagerResponder(evt, gestureState);
84+
}
85+
this.props.onGalleryStateChanged && this.props.onGalleryStateChanged(false);
86+
}
87+
if (this.activeResponder === this.viewPagerResponder) {
88+
const dx = gestureState.moveX - gestureState.previousMoveX;
89+
const offset = this.getViewPagerInstance().getScrollOffsetFromCurrentPage();
90+
if (dx > 0 && offset > 0 && !this.shouldScrollViewPager(evt, gestureState)) {
91+
if (dx > offset) { // active image responder
92+
this.getViewPagerInstance().scrollByOffset(offset);
93+
gestureState.moveX -= offset;
94+
this.activeImageResponder(evt, gestureState);
95+
}
96+
} else if (dx < 0 && offset < 0 && !this.shouldScrollViewPager(evt, gestureState)) {
97+
if (dx < offset) { // active image responder
98+
this.getViewPagerInstance().scrollByOffset(offset);
99+
gestureState.moveX -= offset;
100+
this.activeImageResponder(evt, gestureState);
101+
}
102+
}
103+
}
104+
this.activeResponder.onMove(evt, gestureState);
105+
},
106+
onResponderRelease: onResponderReleaseOrTerminate,
107+
onResponderTerminate: onResponderReleaseOrTerminate,
108+
onResponderTerminationRequest: (evt, gestureState) => false, // Do not allow parent view to intercept gesture
109+
onResponderSingleTapConfirmed: (evt, gestureState) => {
110+
this.props.onSingleTapConfirmed && this.props.onSingleTapConfirmed(this.currentPage);
111+
}
112+
});
113+
114+
this.viewPagerResponder = {
115+
onStart: (evt, gestureState) => {
116+
this.getViewPagerInstance().onResponderGrant(evt, gestureState);
117+
},
118+
onMove: (evt, gestureState) => {
119+
this.getViewPagerInstance().onResponderMove(evt, gestureState);
120+
},
121+
onEnd: (evt, gestureState, disableSettle) => {
122+
this.getViewPagerInstance().onResponderRelease(evt, gestureState, disableSettle);
123+
}
124+
};
125+
126+
this.imageResponder = {
127+
onStart: (evt, gestureState) => {
128+
const currentImageTransformer = this.getCurrentImageTransformer();
129+
currentImageTransformer && currentImageTransformer.onResponderGrant(evt, gestureState);
130+
if (this.props.onLongPress) {
131+
this._longPressTimeout = setTimeout(() => {
132+
this.props.onLongPress(gestureState);
133+
}, 600);
134+
}
135+
},
136+
onMove: (evt, gestureState) => {
137+
const currentImageTransformer = this.getCurrentImageTransformer();
138+
currentImageTransformer && currentImageTransformer.onResponderMove(evt, gestureState);
139+
clearTimeout(this._longPressTimeout);
140+
},
141+
onEnd: (evt, gestureState) => {
142+
const currentImageTransformer = this.getCurrentImageTransformer();
143+
currentImageTransformer && currentImageTransformer.onResponderRelease(evt, gestureState);
144+
clearTimeout(this._longPressTimeout);
145+
}
146+
};
147+
}
148+
149+
componentDidMount () {
150+
this._isMounted = true;
151+
}
152+
153+
componentWillUnmount () {
154+
this._isMounted = false;
155+
}
156+
157+
shouldScrollViewPager (evt, gestureState) {
158+
if (gestureState.numberActiveTouches > 1) {
159+
return false;
160+
}
161+
const viewTransformer = this.getCurrentImageTransformer();
162+
if (!viewTransformer) {
163+
return false;
164+
}
165+
166+
const space = viewTransformer.getAvailableTranslateSpace();
167+
const dx = gestureState.moveX - gestureState.previousMoveX;
168+
169+
if (dx > 0 && space.left <= 0 && this.currentPage > 0) {
170+
return true;
171+
}
172+
if (dx < 0 && space.right <= 0 && this.currentPage < this.pageCount - 1) {
173+
return true;
174+
}
175+
return false;
176+
}
177+
178+
activeImageResponder (evt, gestureState) {
179+
if (this.activeResponder !== this.imageResponder) {
180+
if (this.activeResponder === this.viewPagerResponder) {
181+
this.viewPagerResponder.onEnd(evt, gestureState, true); // pass true to disable ViewPager settle
182+
}
183+
this.activeResponder = this.imageResponder;
184+
this.imageResponder.onStart(evt, gestureState);
185+
}
186+
}
187+
188+
activeViewPagerResponder (evt, gestureState) {
189+
if (this.activeResponder !== this.viewPagerResponder) {
190+
if (this.activeResponder === this.imageResponder) {
191+
this.imageResponder.onEnd(evt, gestureState);
192+
}
193+
this.activeResponder = this.viewPagerResponder;
194+
this.viewPagerResponder.onStart(evt, gestureState);
195+
}
196+
}
197+
198+
getImageTransformer (page) {
199+
if (page >= 0 && page < this.pageCount) {
200+
let ref = this.imageRefs.get(page);
201+
if (ref) {
202+
return ref.getViewTransformerInstance();
203+
}
204+
}
205+
}
206+
207+
getCurrentImageTransformer () {
208+
return this.getImageTransformer(this.currentPage);
209+
}
210+
211+
getViewPagerInstance () {
212+
return this.refs['galleryViewPager'];
213+
}
214+
215+
onPageSelected (page) {
216+
this.currentPage = page;
217+
this.props.onPageSelected && this.props.onPageSelected(page);
218+
}
219+
220+
onPageScrollStateChanged (state) {
221+
if (state === 'idle') {
222+
this.resetHistoryImageTransform();
223+
}
224+
this.props.onPageScrollStateChanged && this.props.onPageScrollStateChanged(state);
225+
}
226+
227+
renderPage (pageData, pageId) {
228+
const { onViewTransformed, onTransformGestureReleased, errorComponent, imageComponent } = this.props;
229+
return (
230+
<TransformableImage
231+
onViewTransformed={((transform) => {
232+
onViewTransformed && onViewTransformed(transform, pageId);
233+
})}
234+
onTransformGestureReleased={((transform) => {
235+
// need the 'return' here because the return value is checked in ViewTransformer
236+
return onTransformGestureReleased && onTransformGestureReleased(transform, pageId);
237+
})}
238+
ref={((ref) => { this.imageRefs.set(pageId, ref); })}
239+
key={'innerImage#' + pageId}
240+
errorComponent={errorComponent}
241+
imageComponent={imageComponent}
242+
image={pageData}
243+
/>
244+
);
245+
}
246+
247+
resetHistoryImageTransform () {
248+
let transformer = this.getImageTransformer(this.currentPage + 1);
249+
if (transformer) {
250+
transformer.forceUpdateTransform({scale: 1, translateX: 0, translateY: 0});
251+
}
252+
253+
transformer = this.getImageTransformer(this.currentPage - 1);
254+
if (transformer) {
255+
transformer.forceUpdateTransform({scale: 1, translateX: 0, translateY: 0});
256+
}
257+
}
258+
259+
render () {
260+
let gestureResponder = this.gestureResponder;
261+
262+
let images = this.props.images;
263+
if (!images) {
264+
images = [];
265+
}
266+
this.pageCount = images.length;
267+
268+
if (this.pageCount <= 0) {
269+
gestureResponder = {};
270+
}
271+
272+
const flatListProps = {...DEFAULT_FLAT_LIST_PROPS, ...this.props.flatListProps};
273+
274+
return (
275+
<ViewPager
276+
{...this.props}
277+
flatListProps={flatListProps}
278+
ref={'galleryViewPager'}
279+
scrollViewStyle={this.props.scrollViewStyle}
280+
scrollEnabled={false}
281+
renderPage={this.renderPage}
282+
pageDataArray={images}
283+
{...gestureResponder}
284+
onPageSelected={this.onPageSelected}
285+
onPageScrollStateChanged={this.onPageScrollStateChanged}
286+
onPageScroll={this.props.onPageScroll}
287+
removeClippedSubviews={this.props.removeClippedSubviews}
288+
/>
289+
);
290+
}
291+
}

0 commit comments

Comments
 (0)