@fruits-chain/react-native-xiaoshu
Version:
React Native UI library
60 lines (57 loc) • 1.97 kB
JavaScript
import React, { memo } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme, widthStyle } from '../theme';
import { ArrowLeftOutline } from '../icon';
import { getDefaultValue, renderTextLikeJSX, isDef } from '../helpers';
import { createStyles } from './style';
const BACK_ARROW_HIT_SLOP = {
left: 10,
right: 10 // top: 0,
// bottom: 0,
};
/**
* NavBar 导航栏
*/
const NavBar = _ref => {
let {
style,
leftStyle,
rightStyle,
titleTextStyle,
title,
leftExtra,
rightExtra,
showBackArrow = true,
backArrowColor,
backArrowSize,
bordered = true,
hairline = false,
onPressBackArrow
} = _ref;
const THEME_VAR = useTheme();
const STYLES = widthStyle(THEME_VAR, createStyles);
backArrowColor = getDefaultValue(backArrowColor, THEME_VAR.nav_bar_icon_color);
backArrowSize = getDefaultValue(backArrowSize, THEME_VAR.nav_bar_arrow_size);
const titleJSX = renderTextLikeJSX(title, [STYLES.title_text, titleTextStyle]);
const borderBottomWidth = hairline ? StyleSheet.hairlineWidth : 1;
return /*#__PURE__*/React.createElement(View, {
style: [STYLES.bar, bordered ? {
borderBottomColor: THEME_VAR.border_color,
borderBottomWidth
} : null, style]
}, showBackArrow || isDef(leftExtra) ? /*#__PURE__*/React.createElement(View, {
style: [STYLES.left, leftStyle]
}, showBackArrow ? /*#__PURE__*/React.createElement(TouchableOpacity, {
style: STYLES.back_arrow,
onPress: onPressBackArrow,
activeOpacity: THEME_VAR.active_opacity,
hitSlop: BACK_ARROW_HIT_SLOP
}, /*#__PURE__*/React.createElement(ArrowLeftOutline, {
size: backArrowSize,
color: backArrowColor
})) : null, leftExtra) : null, isDef(rightExtra) ? /*#__PURE__*/React.createElement(View, {
style: [STYLES.right, rightStyle]
}, rightExtra) : null, titleJSX);
};
export default /*#__PURE__*/memo(NavBar);
//# sourceMappingURL=index.js.map