服务端渲染初步支持

src/PhotoConsumer.tsx

@@ -46,9 +46,7 @@ class PhotoViewItem extends React.Component<IPhotoViewItem> {
         onClick: this.handleShow,
         // 子节点若不传 src 则覆盖
         ...children.props.src === undefined
-          ? {
-            src,
-          }
+          ? { src }
           : undefined,
       });
     }

src/PhotoProvider.tsx

@@ -17,6 +17,10 @@ interface IPhotoProvider {
   viewClassName?: string;
   // 图片 className
   imageClassName?: string;
+  // 自定义 loading
+  loadingElement?: JSX.Element;
+  // 加载失败 Element
+  brokenElement?: JSX.Element;
 }
 
 type PhotoProviderState = {
@@ -91,6 +95,8 @@ export default class PhotoProvider extends React.Component<
       maskClassName,
       viewClassName,
       imageClassName,
+      loadingElement,
+      brokenElement,
       children,
     } = this.props;
     const { data, visible, index } = this.state;
@@ -108,6 +114,8 @@ export default class PhotoProvider extends React.Component<
           maskClassName={maskClassName}
           viewClassName={viewClassName}
           imageClassName={imageClassName}
+          loadingElement={loadingElement}
+          brokenElement={brokenElement}
         />
       </PhotoContext.Provider>
     );

src/PhotoSlider.tsx

@@ -71,10 +71,10 @@ export default class PhotoSlider extends React.Component<
 
   constructor(props) {
     super(props);
-    const { index = 0 } = props;
+
     this.state = {
-      translateX: index * -(window.innerWidth + horizontalOffset),
-      photoIndex: index,
+      translateX: 0,
+      photoIndex: 0,
       touched: false,
 
       lastPageX: undefined,
@@ -85,6 +85,11 @@ export default class PhotoSlider extends React.Component<
   }
 
   componentDidMount() {
+    const { index = 0 } = this.props;
+    this.setState({
+      translateX: index * -(window.innerWidth + horizontalOffset),
+      photoIndex: index,
+    });
     window.addEventListener('resize', this.handleResize);
   }
 
@@ -187,7 +192,6 @@ export default class PhotoSlider extends React.Component<
   }
 
   render() {
-    const { innerWidth } = window;
     const {
       images,
       visible,
@@ -210,6 +214,8 @@ export default class PhotoSlider extends React.Component<
     const transform = `translate3d(${translateX}px, 0px, 0)`;
 
     if (visible) {
+      const { innerWidth } = window;
+
       return (
         <SlideWrap className={className}>
           <Backdrop

src/utils/isMobile.ts

@@ -1,6 +1,7 @@
 /**
  * 是否为移动端设备
  */
-const isMobile: boolean = window.navigator.userAgent.includes('Mobile');
+const isMobile: boolean = typeof window !== 'undefined'
+  && window.navigator.userAgent.includes('Mobile');
 
 export default isMobile;