ToolbarAndroid

ToolbarAndroid

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

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

尽管工具栏支持徽标，导航和动作图标的远程图像，但只能在DEV模式下使用，这样才能require('./some_icon.png')转换为打包程序的URL。在发布模式下，您应该始终为这些图标使用可绘制资源。使用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(
  }
}

道具

ViewPropTypes道具...

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

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

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

• title：必需的，这个动作的标题

• icon：这个动作的图标，例如 require('./some_icon.png')

• show：当显示这个动作作为一个图标，或者隐藏在溢出菜单：always，ifRoom或never

• 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

设置工具栏标题颜色。