首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ToolbarAndroid

React组件,它包装了仅限Android的Toolbar小部件。工具栏可以显示徽标,导航图标(例如汉堡包菜单),标题和副标题以及一系列操作。标题和副标题被扩展,标志和导航图标显示在左侧,标题和副标题在中间,动作在右侧。

如果工具栏只有一个孩子,它将显示在标题和动作之间。

尽管工具栏支持徽标,导航和动作图标的远程图像,但只能在DEV模式下使用,这样才能require('./some_icon.png')转换为打包程序的URL。在发布模式下,您应该始终为这些图标使用可绘制资源。使用require('./some_icon.png')会自动为你做,所以只要你没有明确地使用例如{uri: 'http://...'},你会很好。

例:

代码语言:javascript
复制
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();
  }
}

道具

ViewPropTypes道具...

actions?: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]

将工具栏上的可能操作设置为操作菜单的一部分。这些显示为小部件右侧的图标或文本。如果他们不适合他们被放置在一个'溢出'菜单。

该属性需要一个对象数组,其中每个对象都有以下键:

  • title必需的,这个动作的标题
  • icon:这个动作的图标,例如 require('./some_icon.png')
  • show:当显示这个动作作为一个图标,或者隐藏在溢出菜单:alwaysifRoomnever
  • showWithText:布尔值,是否显示图标旁边的文字

contentInsetEnd?: number

设置工具栏结束边缘的内容插入。

内容嵌入会影响除导航按钮和菜单以外的工具栏内容的有效区域。插入定义这些组件的最小边距,并可用于沿着着名的网格线有效地对齐工具栏内容。

contentInsetStart?: number

设置工具栏开始边缘的内容插入。

内容嵌入会影响除导航按钮和菜单以外的工具栏内容的有效区域。插入定义这些组件的最小边距,并可用于沿着着名的网格线有效地对齐工具栏内容。

logo?: optionalImageSource

设置工具栏徽标。

navIcon?: optionalImageSource

设置导航图标。

onActionSelected?: function

选择操作时调用的回调。传递给回调函数的唯一参数是actions数组中action的位置。

onIconClicked?: function

当图标被选中时调用回调。

overflowIcon?: optionalImageSource

设置溢出图标。

rtl?: bool

用于将工具栏方向设置为RTL。除了这个属性你需要添加

android:supportsRtl="true"

到您的应用程序AndroidManifest.xml,然后setLayoutDirection(LayoutDirection.RTL)在您的MainActivity onCreate方法中调用。

subtitle?: string

设置工具栏字幕。

subtitleColor?: color

设置工具栏的字幕颜色。

testID?: string

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

title?: string

设置工具栏标题。

titleColor?: color

设置工具栏标题颜色。

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com