@fruits-chain/react-native-xiaoshu/lib/module/bottom-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, { useMemo, useEffect, useState, memo } from 'react';
import { View, Keyboard, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { varCreator as varCreatorDivider } from '../divider/style';
import { getDefaultValue } from '../helpers';
import Theme from '../theme';
import { varCreator } from './style';

const BottomBar = _ref => {
  let {
    safeAreaInsetBottom = true,
    backgroundColor,
    height,
    hidden = false,
    keyboardShowNotRender = true,
    divider = true,
    style,
    ...restProps
  } = _ref;
  const {
    bottom
  } = useSafeAreaInsets();
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const CV_DIVIDER = Theme.createVar(TOKENS, varCreatorDivider);
  const [keyboardShow, setKeyboardShow] = useState(false); // 监听键盘

  useEffect(() => {
    // 安卓才隐藏底部
    if (keyboardShowNotRender && Platform.OS === 'android') {
      // 注意如果你把 android:windowSoftInputMode 设置为 adjustResize 或是 adjustPan，则在 Android 上只有 keyboardDidShow 和 keyboardDidHide 事件有效。
      const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () => {
        setKeyboardShow(true);
      });
      const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
        setKeyboardShow(false);
      });
      return () => {
        keyboardDidShow.remove();
        keyboardDidHide.remove();
      };
    }
  }, [keyboardShowNotRender]);
  backgroundColor = getDefaultValue(backgroundColor, CV.bottom_bar_background_color);
  height = getDefaultValue(height, CV.bottom_bar_height);
  const viewStyles = useMemo(() => [{
    height: height + (safeAreaInsetBottom ? bottom : 0),
    paddingBottom: safeAreaInsetBottom ? bottom : 0,
    backgroundColor,
    borderTopColor: CV_DIVIDER.divider_color_light,
    borderTopWidth: divider ? 1 : 0
  }, style], [bottom, backgroundColor, divider, height, CV_DIVIDER.divider_color_light, safeAreaInsetBottom, style]); // 本身隐藏

  if (hidden || keyboardShow) {
    return null;
  }

  return /*#__PURE__*/React.createElement(View, _extends({}, restProps, {
    style: viewStyles
  }));
};

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