Q群 567530369,小伙伴们都在这里等你哦~

ToolbarAndroid

ToolbarAndroid是一个包装了仅限Android平台的工具栏(Toolbar)部件的React组件。一个Toolbar可以显示一个徽标,一个导航图标(譬如汉堡形状的菜单按钮),一个标题与副标题,以及一个功能列表。标题和副标题会在中间显示,徽标和导航图标会在左侧显示,而功能列表则在右侧显示。

如果工具栏只有一个子节点,它会在标题和功能列表之间显示。

尽管Toolbar支持在徽标、导航和功能图标上使用远程图片,这也只应该在开发(DEV)模式下使用。在发行(release)模式下,你永远都应该用图片资源来渲染这些图标。使用require('./some_icon.png')会自动帮你包装好,所以只要你不直接用{uri:'http://...'},就没什么问题。

例子:

render: function() {
  return (
    <ToolbarAndroid
      logo={require('./app_logo.png')}
      title="AwesomeApp"
      actions={[{title: 'Settings', icon: require('./icon_settings.png'), show: 'always'}]}
      onActionSelected={this.onActionSelected} />
  )
},
onActionSelected: function(position) {
  if (position === 0) { // index of 'Settings'
    showSettings();
  }
}

查看Props


文档

Props

overflowIcon

设置功能列表的弹出菜单的图标。

类型必填
optionalImageSource

actions

设置功能菜单中的可用功能。他们会显示为部件右侧的图标或文字。如果放不下,则会被放进一个弹出菜单里。

这个属性接受一个对象数组,每个对象可以有如下的字段:

  • title: 必需, 功能的标题。
  • icon: 这个功能的图标,例如require('./some_icon.png')
  • show: 是直接作为icon显示,还是放到弹出菜单里:always总是显示,ifRoom如果工具栏放得下就显示,或者 never不显示。
  • showWithText: 值为布尔类型,指定是否在图标旁边同时还显示文字。
类型必填
array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool}

contentInsetStart

设置工具栏的左边缘和屏幕左边缘的距离。

除了导航按钮和菜单以外,设置这一属性也会影响工具栏的内容区域。它定义了工具栏与屏幕边沿的最小边距,可以用来使工具栏的内容和一些设计上的网格线对齐。

类型必填
number

logo

设置整个工具条的logo。

类型必填
optionalImageSource

navIcon

设置导航器的图标。

类型必填
optionalImageSource

onActionSelected

当一个功能被选中的时候调用此回调。传递给此回调的唯一参数是该功能在actions数组中的位置。

类型必填
function

onIconClicked

当图标被选中的时候调用此回调。

类型必填
function

contentInsetEnd

设置工具栏的右边缘和屏幕右边缘的距离。

除了导航按钮和菜单以外,设置这一属性也会影响工具栏的内容区域。它定义了工具栏与屏幕边沿的最小边距,可以用来使工具栏的内容和一些设计上的网格线对齐。

类型必填
number

rtl

设置工具栏的排列顺序为从右到左。除了将这一属性设为true以外,你还需要在AndroidManifest.xml中添加:android:supportsRtl="true"以及在MainActivityonCreate方法中调用setLayoutDirection(LayoutDirection.RTL)

类型必填
bool

subtitle

设置工具栏的子标题。

类型必填
string

subtitleColor

设置工具栏子标题的颜色。

类型必填
color

testID

用来在端到端测试中定位此视图。

类型必填
string

title

设置工具栏的标题。

类型必填
string

titleColor

设置工具栏的标题颜色。

类型必填
color