渲染出一个导航栏

当 主标题 展示为1行时，主标题 相对于整个Navbar居中；

当 主标题 展示超过1行时，主标题 距离左右 按钮 各 20，然后在剩余空间内文字以左对齐的方式展示。（具体效果下面的 特殊居中样式）

npm install @qnpm/q-navbar --save --registry=http://npmrepo.corp.qunar.com

显示代码

import NavBar from '@qnpm/q-navbar';

    <NavBar
      title={{
        title: '这是标题'
      }}
      mode={'blank'}
    />
    <NavBar
      title={{
        title: '这是标题'
      }}
      mode={'brand'}
    />
    <NavBar
      title={{
        title: '这是标题'
      }}
      mode={'ghost'}
    />
    <NavBar
      title={{
        title: '这是标题'
      }}
      mode={'crystal'}
    />

显示代码

import NavBar from '@qnpm/q-navbar';

    <NavBar
      title={{
        title: '这是标题'
      }}
      leftButton={[{
        icon: 'chevronBack'
      }]}
    />
    <NavBar
      title={{
        title: '这是标题'
      }}
      rightButton={[{
        icon: 'share'
      }]}
    />
    <NavBar
      title={{
        title: '这是标题'
      }}
      leftButton={[{
        icon: 'chevronBack',
        tintColor: '#fff'
      }]}
      rightButton={[
        {
          text: '客服',
          icon: 'chat',
          tintColor: 'red',
          handler: () => {
            alert('客服')
          }
        },
        {
          text: '分享',
          icon: 'share',
          tintColor: 'red',
          handler: () => {
            alert('分享')
          }
        }
      ]}
    />

显示代码

import NavBar from '@qnpm/q-navbar';

<NavBar
    title={{
        title: '背景色变化',
        tintColor: titleColor
    }}
    customStyle={{
        backgroundColor: bgColor
    }}
    duration={210}
    leftButton={[
        {
            icon: 'chevronBack',
            tintColor: titleColor
        }
    ]}
/>

<Button
    text={'改变背景色'}
    onPress={this.changeOpacity}
/>

显示代码

import NavBar from '@qnpm/q-navbar';

const titleRender = () => {
  const [isExpand, changeExpand] = useState(true);
  return (
    <View style={styles.container}>
      <NavBar
        title={{
          title: '这是标题',
          tintColor: 'red',
          subtitle: '这是副标题',
          subTintColor: 'blue'
        }}
      />
      <NavBar
        title={{
          title: '这是标题默认不展开',
          expandTitle: '这里是展开后的标题',
          touchable: true,
          onToggle: () => {}
        }}
      />
      <NavBar
        title={{
          title: '这是标题默认展开',
          expandTitle: '这里是展开后的标题',
          touchable: true,
          expand: isExpand,
          onToggle: () => {
            changeExpand(!isExpand);
          }
        }}
      />
    </View>
  );
}

显示代码

import NavBar from '@qnpm/q-navbar';

    <NavBar
      title={{
        title: '这是标题',
        titleLimitLength: 2
      }}
    />
    <NavBar
      title={{
        title: '这是标题',
        subtitle: '这是副标题',
        subTitleLimitLength: 2
      }}
    />
属性名 类型 默认值 是否必须 说明
adaptNotch boolean false false 是否适配刘海屏
customStyle QNavNarCustomStyle {} false 自定义样式,仅支持修改容器背景颜色
duration number 200ms false 改变背景色时，背景色切换时间
leftButton Array<NavBarButtonProps> | Array<ReactElement> [] false 左侧按钮配置
mode blank｜brand｜ghost｜crystal false false 预设样式类型
needScale boolean false false 是否开启缩放模式，开启后会对字体、容器高度、按钮大小等根据屏幕进行缩放
opacity number false 1 导航透明度
rightButton Array<NavBarButtonProps> | Array<ReactElement> [] false 右侧按钮配置
title NavBarTitleProps or ReactElement {} false 标题配置

属性名 类型 默认值 是否必须 说明
accessible boolean false false 是否打开无障碍标签
accessibilityLabel string '' false 无障碍标签
accessibilityPreName string `` false 无障碍标签前缀
expand boolean false false 标题是否展开，用于从外部控制标题展开状态(支持版本：>=0.0.3)
expandTitle string '' false 展开标题，touchable为true时，点击标题后会展示
numberOfLines number 1 false 主标题展示行数
onToggle (status: boolean) => void () => {} false 点击标题后的回调函数，回传status参数表示标题是展开(true)或收起(false)
subNumberOfLines number 1 false 副标题展示行数
subTintColor string '' false 副标题字体颜色
subtitle string '' false 副标题
subTitleLimitLength number 15 false 副标题默认展示字数，超过该长度后的字数展示...
tintColor string '' false 主标题字体颜色
title string '' false 主标题
titleLimitLength number 9 false 主标题默认展示字数，超过该长度后的字数展示...
touchable boolean false false 主标题是否可点击

当 主标题 展示行数超过1行时，副标题将被隐藏。

NavBarButtonProps 说明

属性名 类型 默认值 是否必须 说明
accessible boolean false false 是否打开无障碍标签
accessibilityLabel string '' false 无障碍标签
accessibilityPreName string `` false 无障碍标签前缀
disabled boolean false false 按钮是否可点击
handler (event: GestureResponderEvent) => void () => {} false 按钮点击回调事件
icon string or ReactElement<Text> '' false 按钮icon名；传字符串时，对应@qnpm/q-theme中的Icon组件中配置的名称
text string '' false 按钮文字
tintColor string '' false 按钮文字颜色

只传text或者只传icon时，则text,icon在按钮区域居中展示； 如果同时传了icon和text，则icon在上，text在下，整体居中。

PresetMode 说明

  • blank // 白色背景+黑色文字
  • brand // 主题色背景+白色文字
  • ghost // 透明背景+黑色文字
  • crystal // 透明背景+白色文字
LottieView
NoticeItem