@td-design/react-native/lib/module/carousel/index.js

react-native UI组件库

import React, { Children, cloneElement, isValidElement } from 'react';
import Animated from 'react-native-reanimated';
import Box from '../box';
import helpers from '../helpers';
import Bullets from './Bullets';
import useCarousel from './useCarousel';
const {
  deviceWidth,
  px
} = helpers;
const Carousel = _ref => {
  let {
    auto = true,
    width = deviceWidth,
    height = px(320),
    duration = 2000,
    indicatorEnabled = true,
    indicatorSize = px(10),
    align = 'center',
    activeColor,
    inactiveColor,
    children
  } = _ref;
  // 放到hooks里面就不起作用了...
  const validChildren = Children.toArray(children).filter(child => /*#__PURE__*/isValidElement(child)).map(child => /*#__PURE__*/cloneElement(child, {
    ...child.props,
    style: {
      ...child.props.style,
      width,
      height
    }
  }));
  const count = validChildren.length;
  const {
    onTouchStart,
    onTouchEnd,
    onScrollEnd,
    currentIndex,
    scrollViewRef
  } = useCarousel({
    auto,
    width,
    duration,
    count
  });
  return /*#__PURE__*/React.createElement(Box, {
    width: width,
    height: height
  }, /*#__PURE__*/React.createElement(Animated.ScrollView, {
    ref: scrollViewRef,
    horizontal: true,
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false,
    snapToAlignment: 'center',
    bounces: false,
    scrollEnabled: true,
    pagingEnabled: true,
    scrollEventThrottle: 1,
    decelerationRate: 'fast',
    onTouchStart: onTouchStart,
    onTouchEnd: onTouchEnd,
    onMomentumScrollEnd: onScrollEnd,
    style: {
      height
    }
  }, validChildren), /*#__PURE__*/React.createElement(Bullets, {
    indicatorEnabled,
    indicatorSize,
    activeColor,
    inactiveColor,
    align,
    currentIndex,
    count,
    width
  }));
};
Carousel.displayName = 'Carousel';
export default Carousel;
//# sourceMappingURL=index.js.map