@fruits-chain/react-native-xiaoshu/lib/module/tab-bar/index.js

React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useState, memo } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { getDefaultValue, isValue } from '../helpers';
import BottomBar from '../bottom-bar';
import { useTheme, widthStyle } from '../theme';
import { useUpdateEffect } from '../hooks';
import { createStyles } from './style';

const TabBar = _ref => {
  let {
    textColor,
    iconColor,
    activeTextColor,
    activeIconColor,
    value,
    defaultValue,
    options,
    onChange,
    ...restProps
  } = _ref;
  const [localValue, setLocalValue] = useState(isValue(value) ? value : defaultValue);
  const THEME_VAR = useTheme();
  const STYLES = widthStyle(THEME_VAR, createStyles);
  textColor = getDefaultValue(textColor, THEME_VAR.tab_bar_text_color);
  iconColor = getDefaultValue(iconColor, THEME_VAR.tab_bar_icon_color);
  activeTextColor = getDefaultValue(activeTextColor, THEME_VAR.tab_bar_active_text_color);
  activeIconColor = getDefaultValue(activeIconColor, THEME_VAR.tab_bar_active_icon_color); // 同步值

  useUpdateEffect(() => {
    setLocalValue(value);
  }, [value]);

  const genOnPress = value => () => {
    setLocalValue(value);
    onChange === null || onChange === void 0 ? void 0 : onChange(value);
  };

  return /*#__PURE__*/React.createElement(BottomBar, _extends({}, restProps, {
    style: STYLES.tab_bar
  }), options.map(item => {
    const isActive = item.value === localValue;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: item.value,
      style: STYLES.item,
      activeOpacity: THEME_VAR.active_opacity,
      onPress: isActive ? undefined : genOnPress(item.value)
    }, item.iconRender(isActive ? activeIconColor : iconColor), /*#__PURE__*/React.createElement(Text, {
      style: [STYLES.item_text, {
        color: isActive ? activeTextColor : textColor
      }]
    }, item.label));
  }));
};

export default /*#__PURE__*/memo(TabBar);
//# sourceMappingURL=index.js.map