@mpxjs/webpack-plugin 2.9.59 → 2.9.64

package/lib/runtime/components/react/mpx-swiper/carouse.tsx

@@ -1,21 +1,25 @@
 /**
  * swiper 实现
  */
-import { View, ScrollView, Dimensions, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint } from 'react-native'
-import React, { forwardRef, useState, useRef, useEffect, ReactNode } from 'react'
+import { Animated, View, ScrollView, Dimensions, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint, Platform, LayoutChangeEvent } from 'react-native'
+import { JSX, forwardRef, useState, useRef, useEffect, ReactNode } from 'react'
 import { CarouseProps, CarouseState } from './type'
 import { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from '../utils'
 
 /**
  * 默认的Style类型
  */
 const styles: { [key: string]: Object } = {
+  slide: {
+    backgroundColor: 'transparent'
+  },
   container_x: {
-    position: 'relative',
+    position: 'relative'
   },
   container_y: {
-    position: 'relative',
+    position: 'relative'
   },
   pagination_x: {
     position: 'absolute',
@@ -25,7 +29,7 @@ const styles: { [key: string]: Object } = {
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   },
 
   pagination_y: {
@@ -36,30 +40,62 @@ const styles: { [key: string]: Object } = {
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   }
 }
 
-
-const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>((props , ref): React.JSX.Element => {
+const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, CarouseProps>((props, ref): JSX.Element => {
   // 默认取水平方向的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<ReturnType <typeof setTimeout> | null>(null)
-  let loopJumpTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null) 
-  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView, CarouseProps>(props, ref, {
-  })
-  const autoplayEndRef = useRef(false)
-  // 存储layout布局信息
-  const layoutRef = useRef({})
+  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView & View, CarouseProps>(props, ref, {})
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps,
+    layoutStyle
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onWrapperLayout })
   // 内部存储上一次的偏移量
   const internalsRef = useRef({
     offset: {
@@ -68,125 +104,194 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     },
     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
+      y: dir === 'y' ? defaultY : 0
     },
-    loopJump: false,
     dir
-  } as CarouseState);
+  } as CarouseState)
+  /**
+   * @desc: 开启下一次自动轮播
+  */
+  function createAutoPlay () {
+    autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current)
+    autoplayTimerRef.current = setTimeout(() => {
+      startAutoPlay()
+    }, props.interval || 500)
+  }
 
   useEffect(() => {
     // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
     if (props.autoplay) {
-      startAutoPlay()
-    } else {
-      startSwiperLoop()
+      createAutoPlay()
     }
-  }, [props.autoplay, props.current, state.index]);
+  }, [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.current])
   /**
-   * 更新index，以视图的offset计算当前的索引
+   * @desc: 更新状态: index和offset, 并响应索引变化的事件
+   * scrollViewOffset: 移动到的目标位置
   */
-  function updateIndex (scrollViewOffset: NativeScrollPoint) {
-    const diff = scrollViewOffset[dir] - internalsRef.current.offset[state.dir]
-    if (!diff) return
+  function updateIndex (scrollViewOffset: NativeScrollPoint, useIndex = false) {
+    const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset)
+    updateState(nextIndex, nextOffset)
+    // 更新完状态之后, 开启新的loop
+  }
 
-    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 updateState (index: number, offset: { x: number, y: number}) {
+    internalsRef.current.offset = offset
     setState((preState) => {
-      const newState =  {
+      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 }
-      }
-      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 }
+  function getNextConfig (scrollViewOffset: NativeScrollPoint) {
+    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 })
+        }
+      } 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
+            }
+          }
+        } as NativeSyntheticEvent<NativeScrollEvent>)
+      } 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)
+      }
+    }
   }
 
   /**
@@ -195,11 +300,18 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   function onScrollBegin () {
     internalsRef.current.isScrolling = true
   }
+
+  /**
+   * 当用户开始拖动结束
+   */
   function onScrollEnd (event: NativeSyntheticEvent<NativeScrollEvent>) {
+    // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+    if (totalElements === 1) {
+      return
+    }
     internalsRef.current.isScrolling = false
-    
     // 用户手动滑动更新索引后，如果开启了自动轮播等重新开始
-    updateIndex(event.nativeEvent.contentOffset)
+    updateIndex(event.nativeEvent.contentOffset, true)
   }
 
   /**
@@ -208,66 +320,82 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   function onScrollEndDrag (event: NativeSyntheticEvent<NativeScrollEvent>) {
     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
     }
   }
-  /**
-   * 垂直方向时，获取单个元素的布局，更新
-  */
-  function onItemLayout (event: LayoutChangeEvent) {
-    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
-    }
-    setState((preState) => {
-      return {
-        ...preState,
-        height
-      }
-    })
-  }
   /**
-   * 水平方向时，获取单个元素的布局，更新
+   * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
   */
-  function onWrapperLayout () {
+  function onWrapperLayout (e: LayoutChangeEvent) {
+    if (hasSelfPercent) {
+      const { width, height } = e?.nativeEvent?.layout || {}
+      setWidth(width || 0)
+      setHeight(height || 0)
+    }
     if (props.enableOffset) {
-      // @ts-ignore
       scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
         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
-    }
-    if (!initRenderRef.current && state.total > 1) {
-      scrollViewRef.current?.scrollTo({ ...state.offset, animated: false })
-      initRenderRef.current = false
+  }
+
+  function getOffset (): Array<number> {
+    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)
+      }
+    } else {
+      for (let i = 0; i < totalElements; i++) {
+        offsetArray.push(i * step)
+      }
     }
+    return offsetArray
   }
 
   function renderScrollView (pages: ReactNode) {
-    let scrollElementProps = {
+    const offsetsArray = getOffset()
+    const scrollElementProps = {
       ref: scrollViewRef,
       horizontal: props.horizontal,
-      pagingEnabled: true,
+      pagingEnabled: false,
+      snapToOffsets: offsetsArray,
+      decelerationRate: 0.99, // 'fast'
       showsHorizontalScrollIndicator: false,
       showsVerticalScrollIndicator: false,
       bounces: false,
@@ -275,9 +403,11 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
       removeClippedSubviews: true,
       automaticallyAdjustContentInsets: false
     }
+    const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth }
     return (
-      <ScrollView
+      <Animated.ScrollView
         {...scrollElementProps}
+        style={[layoutStyle]}
         overScrollMode="always"
         contentOffset={state.offset}
         onScrollBeginDrag={onScrollBegin}
@@ -285,14 +415,14 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
         onScrollEndDrag={onScrollEndDrag}
       >
         {pages}
-      </ScrollView>
+      </Animated.ScrollView>
     )
   }
 
   function renderPagination () {
     if (state.total <= 1) return null
-    let dots: Array<ReactNode> = []
-    const activeDotStyle = [          {
+    const dots: Array<ReactNode> = []
+    const activeDotStyle = [{
       backgroundColor: props.activeDotColor || '#007aff',
       width: 8,
       height: 8,
@@ -331,68 +461,63 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
 
   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: (Array<ReactNode>) = []
       // 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 = {} as {
-          left? : number;
-          marginLeft?: number;
-          paddingLeft?: number
+          [key: string]: any
         }
-
-        if (previousMargin) {
-            extraStyle.left = +previousMargin
-        }
-        if (nextMargin && state.index === i - 1) {
-          const half = Math.floor(+nextMargin / 2)
-          extraStyle.marginLeft = - half
-          extraStyle.paddingLeft = half
+        if (i === 0 && dir === 'x' && typeof width === 'number') {
+          previousMargin && (extraStyle.marginLeft = previousMargin)
+        } 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 (
+      const realElement = (
         <View style={pageStyle} key={0}>
           {children}
         </View>
       )
+      return realElement
     }
   }
 
-  const vStyle = {} as { height: number }
-  if (dir === 'y') {
-    vStyle.height = defaultHeight
-  }
   const pages: Array<ReactNode> | ReactNode = renderPages()
-  const strStyle: string = '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';
+_Carouse.displayName = '_Carouse'
 
 export default _Carouse