React Native控件之ToolbarAndroid工具栏控件讲解以及使用

最新推荐文章于 2024-08-05 03:05:14 发布

黔北iOSer

最新推荐文章于 2024-08-05 03:05:14 发布

阅读量2.4k

点赞数

分类专栏： React Native专题学习

本文链接：https://blog.csdn.net/u014484863/article/details/51764575

版权

本文详细介绍了React Native的ToolbarAndroid组件，包括其功能、官方示例、各种属性的解析，以及如何在实践中使用它来创建包含标题、副标题、功能列表和导航图标的工具栏。特别强调了在Release模式下应避免使用远程图片资源，以及图标和标题不能同时显示的限制。

摘要由CSDN通过智能技术生成

React Native控件之ToolbarAndroid工具栏控件讲解以及使用

（一）前言

今天我们来看一下工具栏控件ToolBarAndroid的介绍以使用方法。首先我来介绍一下这个组件，组件功能与iOS平台UINavigationBar类似、与Android平台ToolBar组件类似。

（二）ToolbarAndroid简介与官方例子

一个ToolBarAndroid组件可以显示Logo图标、some导航图片（如：菜单功能按钮）、一个标题、一个副标题、一系列功能列表。logo图标和导航图标现在左边，标题和副标题显示在中间（标题和副标题是上下位置显示），功能列表显示在右边。
【注意1】如果ToolBar只有一个子节点，该节点显示在标题和功能列表中间。
【注意2】尽管ToolBar的Logo图标、导航图标以及功能图标支持加载远程图片（网络记载等）。不过不推荐使用，因为加载远程图片资源只是在Dev(开发模式)中支持。但是在Release（发布模式）中，只能使用应用中图片资源来进行渲染。例如使用require(‘./some_icon.png’)来自动帮我们加载资源图片。所以只要我们在开发中不要使用{uri:’http://…..’}就一般没有问题。

我们来看看官方例子：

render:function(){
  return(
    <ToolbarAndroid 
    logo={
  require(./app_logo.png)}
    title='PerfectProject'
actions={[{title: 'Settings', icon:require('./icon_settings.png'), show:'always'}]}
onActionSelected={this.onActionSelected}
/> );
},

onActionSelected:function(position) {
   if(position===0){ // index of 'Settings' 
      showSettings();
    }
}

上面实例代码讲述了ToolbarAndroid的logo属性、title属性、actions属性、onActionSelected属性，接下来详细讲解一下该组件的属性。

（三）属性介绍

3.1 View 相关属性样式全部都继承

3.2 actions 功能列表，值为数组，传入参数格式：[{title: string, icon: optionalImageSource, show: enum(‘always’, ‘ifRoom’, ‘never’), showWithText: bool}]
进行设置功能菜单中可用的相关功能。这个会显示在ToolbarAndroid组件的右侧（显示方式为图标或者文字），如果界面区域已经放不下了，这个会加入到隐藏的菜单中（弹出才能显示）。传入值是一个对象数组，每个对象包括以下值：