插件导航栏,左侧通常一个按钮,中间标题/副标题,右侧通常一到两个按钮。
和原有 Titlebar
对比改动点
- 在原有图标基础上支持更多的图标(共16种),但不支持自定义图标,只能从
NavigationBar.ICON
中选择,图标样式也有改动 - 传参有改动,删除
leftTextStyle/leftText/rightTextStyle/rightText/style
,增加left/right/backgroundColor
type
含义变更:之前dark
表示白底黑字,容易误导,现在表示深色背景白色文字- 考虑到某些多语言不好兼容的问题,导航栏左右侧只支持图标,不再支持文字
- 导航栏高度固定,不允许更改,背景色仍然可以自定义
Properties:
Name | Type | Description |
---|---|---|
type |
string | 导航栏类型: |
backgroundColor |
object | 导航栏背景色 |
left |
array | 左侧按钮的集合,最多显示两个,多余无效 [{ key, disable, showDot, onPress }] |
right |
array | 右侧按钮的集合,最多显示两个,多余无效 [{ key, disable, showDot, onPress }] |
title |
string | 中间的标题 |
subtitle |
string | 中间的副标题 |
onPressTitle |
string | 点击标题的事件 |
- Since:
- 10021
- 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()
中间标题部分