React Native控件之ToolbarAndroid工具栏控件讲解以及使用
来源:互联网 发布:sql关联查询性能 编辑:程序博客网 时间:2024/05/29 18:36
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组件的右侧(显示方式为图标或者文字),如果界面区域已经放不下了,这个会加入到隐藏的菜单中(弹出才能显示)。传入值是一个对象数组,每个对象包括以下值:
- title: 必须的参数,该功能的标题
- icon:功能的图标,使用require(‘…..’)方法获取
- show:设置图标直接显示、隐藏、显示在弹出菜单中。always代表总是显示,never代表隐藏,ifRoom代表如果bar空间足够就显示。
- showWithText:boolean 设置图标旁边是否要显示标题信息
3.3 contentInSetEnd number 用于设置ToolBar的右边和屏幕的右边缘的间距。
3.4 contentInsetStart number 用于设置ToolBar的左边和屏幕的左边缘的间距。
3.5 logo optionalImageSource 可选图片资源 用于设置Toolbar的Logo图标
3.6 navIcon optionalImageSource 可选图片资源 用于设置导航图标
3.7 onActionSelected function方法 当我们的功能被选中的时候回调方法。该方法只会传入唯一一个参数:点击功能在功能列表中的索引信息
3.8 onIconClicked function 当图标被选中的时候回调方法
3.9 overflowIcon optionalImageSource 可选图片资源 设置功能列表中弹出菜单中的图标
3.10 rtl 设置toolbar中的功能顺序是从右到左(RTL:Right To Left)。为了让该效果生效,你必须在Android应用中的AndroidMainifest.xml中的application节点中添加android:supportsRtl=”true”,然后在你的主Activity(例如:MainActivity)的onCreate方法中调用如下代码:setLayoutDirection(LayoutDirection.RTL)。
3.11 subtitle string 设置toolbar的副标题
3.12 subtitleColor color 设置toolbar的副标题颜色
3.13 title string 设置toolbar标题
3.14 titleColor color 设置toolbar的标题颜色
3.15 testID string 用于定位这个组件在端到端测试中
(四)ToolbarAndroid实例讲解
4.1 只显示标题、副标题、功能列表以及导航图标
'use strict';import React, { AppRegistry, Component, StyleSheet, Text, View,} from 'react-native';var ToolbarAndroid = require('ToolbarAndroid');class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid actions={toolbarActions} navIcon={require('./ic_menu_black_24dp.png')} style={styles.toolbar} subtitle="副标题" title="主标题"></ToolbarAndroid> ); }}var toolbarActions = [ {title: 'Create', icon: require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon: require('./ic_settings_black_48dp.png'), show: 'always'},];const styles = StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, },});AppRegistry.registerComponent('ToolBarAndroidDemo', () => ToolBarAndroidDemo);
4.2 显示标题、功能列表、无导航效果,代码如下:
'use strict';import React, { AppRegistry, Component, StyleSheet, View,} from 'react-native';var ToolbarAndroid = require('ToolbarAndroid');class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid actions={toolbarActions} style={styles.toolbar} title="只存在标题"></ToolbarAndroid> ); }}var toolbarActions = [ {title: 'Create', icon: require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon: require('./ic_settings_black_48dp.png'), show: 'always'},];const styles = StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, },});AppRegistry.registerComponent('ToolBarAndroidDemo', () => ToolBarAndroidDemo);
4.3 显示导航图标、Logo图标、功能列表,代码如下:
'use strict';import React, { AppRegistry, Component, StyleSheet, View,} from 'react-native';var ToolbarAndroid = require('ToolbarAndroid');class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid navIcon={require('./ic_menu_black_24dp.png')} logo={require('./launcher_icon.png')} actions={toolbarActions} style={styles.toolbar} > </ToolbarAndroid> ); }}var toolbarActions = [ {title: 'Create', icon: require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon: require('./ic_settings_black_48dp.png'), show: 'always'},];const styles = StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, },});AppRegistry.registerComponent('ToolBarAndroidDemo', () => ToolBarAndroidDemo);
从以上可以看出 图标icon与标题不能同时出现在Toolbar中。
4.4 最后讲一个知识点就是ToolbarAndroid组件还支持组件的嵌套,我们来看一个实例ToolbarAndroid嵌套SwitchAndroid组件的例子,功能代码如下:
'use strict';import React, { AppRegistry, Component, StyleSheet, View,} from 'react-native';var ToolbarAndroid = require('ToolbarAndroid');var SwitchAndroid = require('SwitchAndroid');class ToolBarAndroidDemo extends Component { render() { return ( <ToolbarAndroid navIcon={require('./ic_menu_black_24dp.png')} logo={require('./launcher_icon.png')} style={styles.toolbar}> <SwitchAndroid value={true} /> </ToolbarAndroid> ); }}var toolbarActions = [ {title: 'Create', icon: require('./ic_create_black_48dp.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon: require('./ic_settings_black_48dp.png'), show: 'always'},];const styles = StyleSheet.create({ toolbar: { backgroundColor: '#e9eaed', height: 56, },});AppRegistry.registerComponent('ToolBarAndroidDemo', () => ToolBarAndroidDemo);
- React Native控件之ToolbarAndroid工具栏控件讲解以及使用
- 【React Native开发】React Native控件之ToolbarAndroid工具栏控件讲解以及使用(15)
- 【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
- React Native控件之Switch开关与Picker选择器组件讲解以及使用
- 【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- React Native控件之Image组件讲解
- React Native控件学习之ProgressBarAndroid讲解
- React Native控件之ViewPagerAndroid讲解
- React Native控件之View视图讲解
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- 【React Native开发】React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17)
- React-native 之Text控件的使用
- React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- React Native控件之ProgressViewIOS进度条组件讲解
- React Native控件之DrawerLayoutAndroid抽屉导航组件讲解
- React Native控件之Switch与Picker组件讲解
- React Native ToolbarAndroid没显示
- 【React Native开发】React Native控件之View视图讲解(7)
- 设计模式 I ——简单工厂模式(Factory)
- linux系统ln命令的用法
- 20160625常规赛总结
- GMTC
- 牛客网校招风暴周-运石头
- React Native控件之ToolbarAndroid工具栏控件讲解以及使用
- 为什么在定义hashcode时要使用31这个数呢?
- 程序员的福利:使用WebCollector爬取某美女网站上的图片
- git学习笔记--撤销修改
- 软件测试 (一) 软件测试方法大汇总
- MATLAB GUI设计中的一些常用函数
- C语言基础 输入三个整数从小到大排序
- 程序与程序员
- hdu_5029_relief grain(树链剖分)