diff --git a/README.md b/README.md index 00738770..6a301087 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ export default class App extends React.Component { | doubleClickInterval | number | no | Double click interval. | | | pageAnimateTime | number | no | Set the animation time for page flipping. | `100` | | enablePreload | boolean | no | Preload the next image | `false` | +| useNativeDriver | boolean | no | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | `false` | | menus | function

`({cancel,saveToLocal}) => React.ReactElement` | no | Custom menus, with 2 methods:`cancel` to hide menus and `saveToLocal` to save image to camera | menuContext | object

`{someKey: someValue}` | no | Custom menu context. | `{ saveToLocal: 'save to the album', cancel: 'cancel' }` ## Development pattern diff --git a/src/image-viewer.component.tsx b/src/image-viewer.component.tsx index 22f52eff..848eb7b1 100644 --- a/src/image-viewer.component.tsx +++ b/src/image-viewer.component.tsx @@ -70,7 +70,7 @@ export default class ImageViewer extends React.Component { Animated.timing(this.fadeAnim, { toValue: 1, duration: 200, - useNativeDriver: false + useNativeDriver: !!this.props.useNativeDriver }).start(); } } @@ -111,7 +111,7 @@ export default class ImageViewer extends React.Component { Animated.timing(this.fadeAnim, { toValue: 1, duration: 200, - useNativeDriver: false + useNativeDriver: !!nextProps.useNativeDriver }).start(); } ); @@ -307,7 +307,7 @@ export default class ImageViewer extends React.Component { Animated.timing(this.positionX, { toValue: this.positionXNumber, duration: this.props.pageAnimateTime, - useNativeDriver: false + useNativeDriver: !!this.props.useNativeDriver }).start(); const nextIndex = (this.state.currentShowIndex || 0) - 1; @@ -341,7 +341,7 @@ export default class ImageViewer extends React.Component { Animated.timing(this.positionX, { toValue: this.positionXNumber, duration: this.props.pageAnimateTime, - useNativeDriver: false + useNativeDriver: !!this.props.useNativeDriver }).start(); const nextIndex = (this.state.currentShowIndex || 0) + 1; @@ -366,7 +366,7 @@ export default class ImageViewer extends React.Component { Animated.timing(this.positionX, { toValue: this.standardPositionX, duration: 150, - useNativeDriver: false + useNativeDriver: !!this.props.useNativeDriver }).start(); } diff --git a/src/image-viewer.type.ts b/src/image-viewer.type.ts index cb4bb971..310f4e0e 100644 --- a/src/image-viewer.type.ts +++ b/src/image-viewer.type.ts @@ -98,6 +98,12 @@ export class Props { */ public pageAnimateTime?: number = 100; + /** + * 是否启用原生动画驱动 + * Whether to use the native code to perform animations. + */ + public useNativeDriver?: boolean = false; + /** * 长按图片的回调 */