Merge pull request #245 from sanqi/master

add pageAnimateTime and  fix enablePreload

Author: ascoders

README.md

@@ -100,6 +100,8 @@ export default class App extends React.Component {
 | backgroundColor        | string<br><br>`white`                                                                  | no       | Component background color                                                                                                                                                                                                           | `black`                                                   |
 | enableSwipeDown        | boolean                                                                                | no       | Enable swipe down to close image viewer. When swipe down, will trigger onCancel.                                                                                                                                                     | false                                                     |
 | 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                                                     |
 
 ## Development pattern
 

src/image-viewer.component.tsx

@@ -181,6 +181,9 @@ export default class ImageViewer extends React.Component<Props, State> {
 
     // 如果已知源图片宽高，直接设置为 success
     if (image.width && image.height){
+      if(this.props.enablePreload && imageLoaded===false){
+        Image.prefetch(image.url)
+      }
       imageStatus.width = image.width;
       imageStatus.height = image.height;
       imageStatus.status = 'success';
@@ -299,7 +302,7 @@ export default class ImageViewer extends React.Component<Props, State> {
     this.standardPositionX = this.positionXNumber;
     Animated.timing(this.positionX, {
       toValue: this.positionXNumber,
-      duration: 100
+      duration: this.props.pageAnimateTime
     }).start();
 
     const nextIndex = (this.state.currentShowIndex || 0) - 1;
@@ -332,7 +335,7 @@ export default class ImageViewer extends React.Component<Props, State> {
     this.standardPositionX = this.positionXNumber;
     Animated.timing(this.positionX, {
       toValue: this.positionXNumber,
-      duration: 100
+      duration: this.props.pageAnimateTime
     }).start();
 
     const nextIndex = (this.state.currentShowIndex || 0) + 1;

src/image-viewer.type.ts

@@ -73,6 +73,11 @@ export class Props {
    */
   public enablePreload?: boolean = false;
 
+  /**
+   * 翻页时的动画时间
+   */
+  public pageAnimateTime?: number = 100;
+
   /**
    * 长按图片的回调
    */