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

基于 @td-design/react-native 的 tabs 组件

import React from 'react';
import { Animated } from 'react-native';
import PagerView from 'react-native-pager-view';
import { Box, helpers } from '@td-design/react-native';
import SceneView from './SceneView';
import ScrollBar from './ScrollBar';
import TabBar from './TabBar';
import usePagerView from './usePagerView';
const {
  px
} = helpers;
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
export default function Tabs(_ref) {
  let {
    initialPage = 0,
    lazy = false,
    renderLazyPlaceholder,
    page,
    onChange,
    scenes = [],
    height = px(48),
    showIndicator = true,
    scrollEnabled = true,
    overdrag = true,
    keyboardDismissMode = 'on-drag',
    tabStyle,
    tabItemStyle,
    labelStyle,
    indicatorStyle
  } = _ref;
  const {
    pagerViewRef,
    setPage,
    currentPage,
    position,
    offset,
    isIdle,
    scrollState,
    onPageScroll,
    onPageSelected,
    onPageScrollStateChanged
  } = usePagerView(initialPage, page, onChange);
  const titles = scenes.map(tab => tab.title);
  return /*#__PURE__*/React.createElement(Box, {
    flex: 1
  }, /*#__PURE__*/React.createElement(ScrollBar, {
    page: currentPage,
    height: height
  }, /*#__PURE__*/React.createElement(TabBar, {
    tabs: titles,
    onTabPress: setPage,
    page: currentPage,
    position: position,
    offset: offset,
    isIdle: isIdle,
    scrollState: scrollState,
    showIndicator: showIndicator,
    tabStyle: tabStyle,
    tabItemStyle: tabItemStyle,
    labelStyle: labelStyle,
    indicatorStyle: indicatorStyle
  })), /*#__PURE__*/React.createElement(AnimatedPagerView, {
    ref: pagerViewRef,
    style: {
      flex: 1
    },
    overdrag: overdrag,
    initialPage: currentPage,
    keyboardDismissMode: keyboardDismissMode,
    scrollEnabled: scrollEnabled,
    overScrollMode: "always",
    onPageScroll: onPageScroll,
    onPageSelected: onPageSelected,
    onPageScrollStateChanged: onPageScrollStateChanged
  }, scenes.map((_ref2, i) => {
    let {
      component
    } = _ref2;
    return /*#__PURE__*/React.createElement(SceneView, {
      key: i,
      index: i,
      lazy: lazy,
      currentPage: currentPage
    }, _ref3 => {
      let {
        loading
      } = _ref3;
      if (loading) return renderLazyPlaceholder === null || renderLazyPlaceholder === void 0 ? void 0 : renderLazyPlaceholder();
      return component;
    });
  })));
}
//# sourceMappingURL=index.js.map