@mpxjs/webpack-plugin 2.9.59 → 2.9.64

package/lib/runtime/components/react/dist/mpx-swiper/carouse.jsx

@@ -1,19 +1,23 @@
 /**
  * swiper 实现
  */
-import { View, ScrollView, Dimensions } from 'react-native';
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Animated, View, Dimensions, Platform } from 'react-native';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from '../utils';
 /**
  * 默认的Style类型
  */
 const styles = {
+    slide: {
+        backgroundColor: 'transparent'
+    },
     container_x: {
-        position: 'relative',
+        position: 'relative'
     },
     container_y: {
-        position: 'relative',
+        position: 'relative'
     },
     pagination_x: {
         position: 'absolute',
@@ -23,7 +27,7 @@ const styles = {
         flexDirection: 'row',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'center'
     },
     pagination_y: {
         position: 'absolute',
@@ -33,27 +37,42 @@ const styles = {
         flexDirection: 'column',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'center'
     }
 };
 const _Carouse = forwardRef((props, ref) => {
     // 默认取水平方向的width
     const { width } = Dimensions.get('window');
-    const defaultHeight = 150;
+    const { style, previousMargin = 0, nextMargin = 0, enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight } = props;
+    // 计算transfrom之类的
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { textProps } = splitProps(props);
+    const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children;
+    const totalElements = Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0);
+    const defaultHeight = (normalStyle?.height || 150);
+    const defaultWidth = (normalStyle?.width || width || 375);
     const dir = props.horizontal === false ? 'y' : 'x';
     // state的offset默认值
-    const defaultX = width * (props.circular ? props.current + 1 : props.current) || 0;
-    const defaultY = defaultHeight * (props.circular ? props.current + 1 : props.current) || 0;
+    // const initIndex = props.circular ? props.current + 1: (props.current || 0)
+    // 记录真正的下标索引, 不包括循环前后加入的索引, 游标
+    const initIndex = props.current || 0;
+    // 这里要排除超过元素个数的设置
+    const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
+    const defaultX = (defaultWidth * initOffsetIndex) || 0;
+    const defaultY = (defaultHeight * initOffsetIndex) || 0;
     // 内部存储上一次的offset值
-    const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children;
-    // 默认设置为初次渲染
-    const initRenderRef = useRef(true);
     const autoplayTimerRef = useRef(null);
-    let loopJumpTimerRef = useRef(null);
     const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {});
-    const autoplayEndRef = useRef(false);
+    const { 
     // 存储layout布局信息
-    const layoutRef = useRef({});
+    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onWrapperLayout });
     // 内部存储上一次的偏移量
     const internalsRef = useRef({
         offset: {
@@ -62,123 +81,198 @@ const _Carouse = forwardRef((props, ref) => {
         },
         isScrolling: false
     });
+    const isDragRef = useRef(false);
     const [state, setState] = useState({
         children: newChild,
-        width: width || 375,
-        height: defaultHeight,
-        index: 0,
-        total: Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0),
+        width: dir === 'x' && typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth,
+        height: dir === 'y' && typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight,
+        // 真正的游标索引, 从0开始
+        index: initIndex,
+        total: totalElements,
         offset: {
             x: dir === 'x' ? defaultX : 0,
             y: dir === 'y' ? defaultY : 0
         },
-        loopJump: false,
         dir
     });
+    /**
+     * @desc: 开启下一次自动轮播
+    */
+    function createAutoPlay() {
+        autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current);
+        autoplayTimerRef.current = setTimeout(() => {
+            startAutoPlay();
+        }, props.interval || 500);
+    }
     useEffect(() => {
         // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
         if (props.autoplay) {
-            startAutoPlay();
+            createAutoPlay();
         }
-        else {
-            startSwiperLoop();
+    }, [props.autoplay, props.current, state.index, state.width, state.height]);
+    useEffect(() => {
+        // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
+        if (!props.autoplay && props.current !== state.index) {
+            const initIndex = props.current || 0;
+            // 这里要排除超过元素个数的设置
+            const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
+            const defaultX = (defaultWidth * initOffsetIndex) || 0;
+            const offset = {
+                x: dir === 'x' ? defaultX : 0,
+                y: dir === 'y' ? defaultY : 0
+            };
+            state.offset = offset;
+            internalsRef.current.offset = offset;
+            setState((preState) => {
+                return {
+                    ...preState,
+                    offset
+                };
+            });
         }
-    }, [props.autoplay, props.current, state.index]);
+    }, [props.current]);
     /**
-     * 更新index，以视图的offset计算当前的索引
+     * @desc: 更新状态: index和offset, 并响应索引变化的事件
+     * scrollViewOffset: 移动到的目标位置
     */
-    function updateIndex(scrollViewOffset) {
-        const diff = scrollViewOffset[dir] - internalsRef.current.offset[state.dir];
-        if (!diff)
-            return;
-        const step = dir === 'x' ? state.width : state.height;
-        let loopJump = false;
-        let newIndex = state.index + Math.round(diff / step);
-        // 若是循环circular
-        // 1. 当前索引-1, 初始化为最后一个索引, 且scrollView的偏移量设置为 每个元素的步长 * 一共多少个元素， 这里为什么不减一呢
-        // 2. 当前索引>total, 初始化为第一个元素，且scrollView的偏移量设置为一个元素的步长
-        if (props.circular) {
-            if (state.index <= -1) {
-                newIndex = state.total - 1;
-                scrollViewOffset[state.dir] = step * state.total;
-                loopJump = true;
-            }
-            else if (newIndex >= state.total) {
-                newIndex = 0;
-                scrollViewOffset[state.dir] = step;
-                loopJump = true;
-            }
-        }
-        // 存储当前的偏移量
-        internalsRef.current.offset = scrollViewOffset;
-        // 这里需不需要区分是否loop，初始化？？？？
+    function updateIndex(scrollViewOffset, useIndex = false) {
+        const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset);
+        updateState(nextIndex, nextOffset);
+        // 更新完状态之后, 开启新的loop
+    }
+    /**
+     * 更新索引状态
+    */
+    function updateState(index, offset) {
+        internalsRef.current.offset = offset;
         setState((preState) => {
             const newState = {
                 ...preState,
-                index: newIndex,
-                offset: scrollViewOffset,
-                loopJump
+                index: index,
+                // offset用来指示当前scrollView的偏移量
+                offset: offset
             };
             return newState;
         });
         internalsRef.current.isScrolling = false;
         // getCustomEvent
-        const eventData = getCustomEvent('change', {}, { detail: { current: newIndex, source: 'touch' }, layoutRef: layoutRef });
+        const eventData = getCustomEvent('change', {}, { detail: { current: index, source: 'touch' }, layoutRef: layoutRef });
         props.bindchange && props.bindchange(eventData);
-        // 更新完状态之后, 开启新的loop
     }
     /**
-     * 用户手动点击播放
-     * 触发scrollView的onScrollEnd事件 => 然后更新索引 => 通过useEffect事件 => startSwiperLoop => 主动更新scrollView到指定的位置
-     * 若是circular, 到最后一个索引会更新为0，但是视觉要scrollView到下一个
-     * 若是circular, 到第一个再往前索引会更新为total-1, 但是视觉是展示的最后一个
+     * @desc: 获取下一个位置的索引、scrollView的contentOffset、scrollTo到的offset
+     * @desc: 包括正循环、反向循环、不循环
+     * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset,
+     * 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
     */
-    function startSwiperLoop() {
-        loopJumpTimerRef.current = setTimeout(() => {
-            let offset = { x: 0, y: 0, animated: false };
-            if (state.index > 0) {
-                offset = props.horizontal ? { x: state.width * state.index, y: 0, animated: false } : { x: 0, y: state.height * state.index, animated: false };
+    function getNextConfig(scrollViewOffset) {
+        const step = state.dir === 'x' ? state.width : state.height;
+        const currentOffset = state.offset;
+        let nextIndex = state.index + 1;
+        let nextOffset = currentOffset;
+        // autoMoveOffset scrollView 滚动到前后增加的位置
+        let autoMoveOffset = currentOffset;
+        let isBack = false;
+        let isAutoEnd = false;
+        // 如果是循环反向的
+        if (scrollViewOffset?.[state.dir] < currentOffset[state.dir]) {
+            isBack = true;
+            nextIndex = isBack ? nextIndex - 2 : nextIndex;
+        }
+        if (!props.circular) {
+            // nextIndex = isBack ? nextIndex - 2 : nextIndex
+            nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex });
+        }
+        else {
+            if (isBack) {
+                if (nextIndex < 0) {
+                    // 反向: scollView 滚动到虚拟的位置
+                    autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 });
+                    nextIndex = state.total - 1;
+                    // 反向: 数组最后一个index
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total });
+                    isAutoEnd = true;
+                }
+                else {
+                    // 反向非最后一个
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step });
+                }
             }
-            if (props.circular) {
-                offset = props.horizontal ? { x: state.width * (state.index + 1), y: 0, animated: false } : { x: 0, y: state.height * (state.index + 1), animated: false };
+            else {
+                if (nextIndex > state.total - 1) {
+                    autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) });
+                    nextIndex = 0;
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step });
+                    isAutoEnd = true;
+                }
+                else {
+                    // nextIndex =  nextIndex,
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step });
+                }
             }
-            scrollViewRef.current?.scrollTo(offset);
-            internalsRef.current.offset = offset;
-        }, props.duration || 500);
+        }
+        return {
+            // 下一个要滚动到的实际元素的索引
+            nextIndex,
+            // 下一个要滚动到实际元素的offset
+            nextOffset,
+            // scrollTo一个位置的坐标, 虚拟元素的位置
+            autoMoveOffset,
+            isAutoEnd
+        };
     }
     /**
-     * 开启自动轮播
-     * 每间隔interval scrollView的offset更改到下一个位置，通过onScrollEnd来获取contentOffset再计算要更新的索引index
+     * @desc: 开启自动轮播
     */
     function startAutoPlay() {
-        // 已经开启过autopaly则不重新创建
-        if (!Array.isArray(state.children) || !props.autoplay || internalsRef.current.isScrolling || autoplayEndRef.current) {
+        if (state.width && isNaN(+state.width)) {
+            createAutoPlay();
             return;
         }
-        autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current);
-        // 非循环自动播放的形式下 到最后一帧 结束自动播放
-        if (!props.circular && state.index === state.total - 1) {
-            autoplayEndRef.current = true;
+        if (!Array.isArray(state.children)) {
             return;
         }
-        // 开启自动播放
-        autoplayTimerRef.current = setTimeout(() => {
-            if (state.total < 2)
-                return;
-            const nexStep = 1;
-            const toIndex = (props.circular ? 1 : 0) + nexStep + state.index;
-            let x = 0;
-            let y = 0;
-            if (state.dir === 'x')
-                x = toIndex * state.width;
-            if (state.dir === 'y')
-                y = toIndex * state.height;
-            // animated会影响切换的offset，先改为false
-            scrollViewRef.current?.scrollTo({ x, y, animated: false });
-            internalsRef.current.isScrolling = true;
-            autoplayEndRef.current = false;
-            updateIndex({ x, y });
-        }, props.interval || 5000);
+        const step = state.dir === 'x' ? state.width : state.height;
+        const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset);
+        // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
+        // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
+        if (Platform.OS === 'ios') {
+            if (!isAutoEnd) {
+                scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true });
+            }
+            else {
+                if (state.dir === 'x') {
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.x, animated: true });
+                }
+                else {
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset.y, y: autoMoveOffset.y, animated: true });
+                }
+            }
+        }
+        else {
+            if (!isAutoEnd) {
+                scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true });
+                onScrollEnd({
+                    nativeEvent: {
+                        contentOffset: {
+                            x: +nextOffset.x,
+                            y: +nextOffset.y
+                        }
+                    }
+                });
+            }
+            else {
+                // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
+                if (state.dir === 'x') {
+                    scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true });
+                    // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
+                }
+                else {
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true });
+                }
+                updateState(0, nextOffset);
+            }
+        }
     }
     /**
      * 当用户开始拖动此视图时调用此函数, 更新当前在滚动态
@@ -186,10 +280,17 @@ const _Carouse = forwardRef((props, ref) => {
     function onScrollBegin() {
         internalsRef.current.isScrolling = true;
     }
+    /**
+     * 当用户开始拖动结束
+     */
     function onScrollEnd(event) {
+        // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+        if (totalElements === 1) {
+            return;
+        }
         internalsRef.current.isScrolling = false;
         // 用户手动滑动更新索引后，如果开启了自动轮播等重新开始
-        updateIndex(event.nativeEvent.contentOffset);
+        updateIndex(event.nativeEvent.contentOffset, true);
     }
     /**
      * 当拖拽结束时，检测是否可滚动
@@ -197,63 +298,81 @@ const _Carouse = forwardRef((props, ref) => {
     function onScrollEndDrag(event) {
         const { contentOffset } = event.nativeEvent;
         const { index, total } = state;
+        isDragRef.current = true;
         const internalOffset = internalsRef.current.offset;
         const previousOffset = props.horizontal ? internalOffset.x : internalOffset.y;
-        const newOffset = props.horizontal ? contentOffset.x : contentOffset.y;
-        if (previousOffset === newOffset && (index === 0 || index === total - 1)) {
+        const moveOffset = props.horizontal ? contentOffset.x : contentOffset.y;
+        if (previousOffset === moveOffset && (index === 0 || index === total - 1)) {
             internalsRef.current.isScrolling = false;
         }
     }
     /**
-     * 垂直方向时，获取单个元素的布局，更新
+     * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
     */
-    function onItemLayout(event) {
-        if (!initRenderRef.current || state.dir === 'x')
-            return;
-        const { width, height } = event.nativeEvent.layout;
-        if (state.total > 1) {
-            internalsRef.current.offset[state.dir] = (state.dir === 'y' ? height * state.index : state.width * state.index);
-        }
-        if (!state.offset.x && !state.offset.y) {
-            state.offset = internalsRef.current.offset;
-        }
-        if (initRenderRef.current && state.total > 1) {
-            scrollViewRef.current?.scrollTo({ ...internalsRef.current.offset, animated: false });
-            initRenderRef.current = false;
+    function onWrapperLayout(e) {
+        if (hasSelfPercent) {
+            const { width, height } = e?.nativeEvent?.layout || {};
+            setWidth(width || 0);
+            setHeight(height || 0);
         }
-        setState((preState) => {
-            return {
-                ...preState,
-                height
-            };
-        });
-    }
-    /**
-     * 水平方向时，获取单个元素的布局，更新
-    */
-    function onWrapperLayout() {
         if (props.enableOffset) {
-            // @ts-ignore
             scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                 layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+                const isWDiff = state.width !== width;
+                const isHDiff = state.height !== height;
+                if (isWDiff || isHDiff) {
+                    const changeState = {
+                        width: isWDiff ? width : state.width,
+                        height: isHDiff ? height : state.height
+                    };
+                    const attr = state.dir === 'x' ? 'width' : 'height';
+                    changeState[attr] = changeState[attr] - previousMargin - nextMargin;
+                    const correctOffset = Object.assign({}, state.offset, {
+                        [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
+                    });
+                    state.offset = correctOffset;
+                    state.width = changeState.width;
+                    state.height = changeState.height;
+                    setState((preState) => {
+                        return {
+                            ...preState,
+                            offset: correctOffset,
+                            width: changeState.width,
+                            height: changeState.height
+                        };
+                    });
+                    scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false });
+                }
                 props.getInnerLayout && props.getInnerLayout(layoutRef);
             });
         }
-        if (state.dir === 'y')
-            return;
-        if (!state.offset.x && !state.offset.y) {
-            state.offset = internalsRef.current.offset;
+    }
+    function getOffset() {
+        const step = state.dir === 'x' ? state.width : state.height;
+        if (!step || Number.isNaN(+step))
+            return [];
+        const offsetArray = [];
+        if (previousMargin) {
+            offsetArray.push(0);
+            for (let i = 1; i < totalElements; i++) {
+                offsetArray.push(i * step - previousMargin);
+            }
         }
-        if (!initRenderRef.current && state.total > 1) {
-            scrollViewRef.current?.scrollTo({ ...state.offset, animated: false });
-            initRenderRef.current = false;
+        else {
+            for (let i = 0; i < totalElements; i++) {
+                offsetArray.push(i * step);
+            }
         }
+        return offsetArray;
     }
     function renderScrollView(pages) {
-        let scrollElementProps = {
+        const offsetsArray = getOffset();
+        const scrollElementProps = {
             ref: scrollViewRef,
             horizontal: props.horizontal,
-            pagingEnabled: true,
+            pagingEnabled: false,
+            snapToOffsets: offsetsArray,
+            decelerationRate: 0.99,
             showsHorizontalScrollIndicator: false,
             showsVerticalScrollIndicator: false,
             bounces: false,
@@ -261,14 +380,15 @@ const _Carouse = forwardRef((props, ref) => {
             removeClippedSubviews: true,
             automaticallyAdjustContentInsets: false
         };
-        return (<ScrollView {...scrollElementProps} overScrollMode="always" contentOffset={state.offset} onScrollBeginDrag={onScrollBegin} onMomentumScrollEnd={onScrollEnd} onScrollEndDrag={onScrollEndDrag}>
+        const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth };
+        return (<Animated.ScrollView {...scrollElementProps} style={[layoutStyle]} overScrollMode="always" contentOffset={state.offset} onScrollBeginDrag={onScrollBegin} onMomentumScrollEnd={onScrollEnd} onScrollEndDrag={onScrollEndDrag}>
         {pages}
-      </ScrollView>);
+      </Animated.ScrollView>);
     }
     function renderPagination() {
         if (state.total <= 1)
             return null;
-        let dots = [];
+        const dots = [];
         const activeDotStyle = [{
                 backgroundColor: props.activeDotColor || '#007aff',
                 width: 8,
@@ -303,51 +423,55 @@ const _Carouse = forwardRef((props, ref) => {
     }
     function renderPages() {
         const { width, height, total, children } = state;
-        const { circular, previousMargin, nextMargin, innerProps } = props;
+        const { circular } = props;
         const pageStyle = { width: width, height: height };
+        // 设置了previousMargin或者nextMargin,
+        // 1. 元素的宽度是减去这两个数目之和
+        // 2. previousMargin设置marginLeft正值, nextmargin设置marginRight负值
+        // 3. 第一个元素设置previousMargin 和 nextMargin, 最后一个元素
         if (total > 1 && Array.isArray(children)) {
             let arrElements = [];
             // pages = ["2", "0", "1", "2", "0"]
-            let pages = Array.isArray(children) && Object.keys(children) || [];
+            const pages = Array.isArray(children) ? Object.keys(children) : [];
             /* 无限循环的时候 */
             if (circular) {
                 pages.unshift(total - 1 + '');
                 pages.push('0');
             }
             arrElements = pages.map((page, i) => {
-                let pageStyle2 = { width: width, height: height };
                 const extraStyle = {};
-                if (previousMargin) {
-                    extraStyle.left = +previousMargin;
+                if (i === 0 && dir === 'x' && typeof width === 'number') {
+                    previousMargin && (extraStyle.marginLeft = previousMargin);
                 }
-                if (nextMargin && state.index === i - 1) {
-                    const half = Math.floor(+nextMargin / 2);
-                    extraStyle.marginLeft = -half;
-                    extraStyle.paddingLeft = half;
+                else if (i === pages.length - 1 && typeof width === 'number') {
+                    nextMargin && (extraStyle.marginRight = nextMargin);
                 }
-                return (<View style={[pageStyle2, extraStyle]} key={'page' + i} onLayout={onItemLayout}>
-            {children[+page]}
-          </View>);
+                // return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>{children[+page]}</View>)
+                return (<View style={[pageStyle, styles.slide, extraStyle]} key={'page' + i}>
+          {wrapChildren({
+                        children: children[+page]
+                    }, {
+                        hasVarDec,
+                        varContext: varContextRef.current,
+                        textStyle,
+                        textProps
+                    })}
+        </View>);
             });
             return arrElements;
         }
         else {
-            return (<View style={pageStyle} key={0}>
+            const realElement = (<View style={pageStyle} key={0}>
           {children}
         </View>);
+            return realElement;
         }
     }
-    const vStyle = {};
-    if (dir === 'y') {
-        vStyle.height = defaultHeight;
-    }
     const pages = renderPages();
-    const strStyle = 'container_' + state.dir;
-    const eventProps = props.innerProps || {};
-    return (<View style={[styles[strStyle], vStyle]} {...eventProps} onLayout={onWrapperLayout}>
+    return (<View style={[normalStyle, innerStyle, layoutStyle]} {...layoutProps}>
       {renderScrollView(pages)}
       {props.showsPagination && renderPagination()}
-    </View>);
+  </View>);
 });
 _Carouse.displayName = '_Carouse';
 export default _Carouse;