Module: miot/ui/NavigationBar

插件导航栏,左侧通常一个按钮,中间标题/副标题,右侧通常一到两个按钮。 和原有 Titlebar 对比改动点

  • 在原有图标基础上支持更多的图标(共16种),但不支持自定义图标,只能从 NavigationBar.ICON 中选择,图标样式也有改动
  • 传参有改动,删除 leftTextStyle/leftText/rightTextStyle/rightText/style,增加 left/right/backgroundColor
  • type 含义变更:之前 dark 表示白底黑字,容易误导,现在表示深色背景白色文字
  • 考虑到某些多语言不好兼容的问题,导航栏左右侧只支持图标,不再支持文字
  • 导航栏高度固定,不允许更改,背景色仍然可以自定义
Properties:
Name Type Description
type string

导航栏类型:NavigationBar.TYPE.DARK 表示深色背景白色文字NavigationBar.TYPE.LIGHT 相反

backgroundColor object

导航栏背景色

left array

左侧按钮的集合,最多显示两个,多余无效 [{ key, disable, showDot, onPress }]

right array

右侧按钮的集合,最多显示两个,多余无效 [{ key, disable, showDot, onPress }]

title string

中间的标题

subtitle string

中间的副标题

onPressTitle string

点击标题的事件

Since:
  • 10021
Author:
  • Geeook
See:
  • com.xiaomi.demo->教程->NavigationBarDemo
Example
```js
<NavigationBar
  backgroundColor='transparent'
  type={NavigationBar.TYPE.DARK}
  left={[
    {
      key: NavigationBar.ICON.BACK,
      onPress: _ => this.props.navigation.goBack()
    },
    {
      key: NavigationBar.ICON.CLOSE,
      onPress: _ => console.log('onPress')
    }
  ]}
  right={[
    {
      key: NavigationBar.ICON.COLLECT,
      disable: true,
      onPress: _ => console.log('onPress')
    },
    {
      key: NavigationBar.ICON.MORE,
      showDot: this.state.showDot,
      onPress: _ => console.log('onPress')
    }
  ]}
  title='标题'
  subtitle='副标题'
  onPressTitle={_ => console.log('onPressTitle')}
/>
```

Members

(inner, constant) ICON

图标资源的索引

(inner, constant) TYPE

导航栏类型

Methods

getIconsOfType(arr)

根据 type 和 disable 确定 icon

Parameters:
Name Type Description
arr array

按钮集合

render()

导航栏在进入插件的时候就已经生成,并且常驻,所以样式判断逻辑不能写在 constructor 中

renderIcons(arr)

根据处理后的按钮集合数据渲染按钮

Parameters:
Name Type Description
arr array

经过处理后的按钮集合

renderTitle()

中间标题部分