基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的,大同小异的,只不过是用的语言不太相同罢了,学得快的同学可以去官网直接看官方文档学习了。今天我们讲ToolbarAndroid,顾名思义,这个组件只能在Android平台用,而且跟Android原生中的Toolbar控件基本一样。

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

如果我的工具栏上只有一个子节点,那么它将在标题与功能列表之间显示。

熟悉Android toolbar的朋友肯定就会熟悉我,因为我和它就像是双胞胎一样的好朋友,毕竟我就是根据它而定制的嘛。

特别注意:尽管我上面的标识(徽标)和导航图标可以显示远程图片,也就是从服务器和网络获取,但是仅限开发者模式,如果在发行(release)模式下,你永远都应该用图片资源来渲染这些图标。使用require(‘./some_icon.png’)会自动帮你包装好,所以只要你不直接用{uri:’http://...'},就没什么问题。

性格特点

看完我的简单介绍,那就一起来看看我有哪些属性吧,还是那句话,只有熟悉了我的性格特点,知彼知己,才能运用自如嘛。

  • actions 设置功能列表的属性,这跟android原生中的toolbar简直太像了,有如下属性[{title: string, icon: optionalImageSource, show: enum(‘always’, ‘ifRoom’, ‘never’), showWithText: bool}] 。
    • title 功能标题
    • icon 功能图标
    • show icon显示还是隐藏,在弹出菜单里显示:always总是显示,ifRoom如果放的下则显示,或者never从不显示。
    • showWithText bool值,是否在显示图标的地方同时还显示文字
  • contentInsetEnd 设置Toolbar的右边和屏幕右边缘的距离
  • contentInsetStart 作用同上,与上面正好相反
  • logo 设置toolbar的标志,徽标也就是logo
  • navIcon 设置导航图标
  • onActionSelected func 当右边功能列表一个功能被选中的时候调用此回调。传递给此回调的唯一参数是该功能在actions数组中的位置
  • onIconClicked func 当图标被点击时,回调此函数
  • overflowIcon 设置功能列表的弹出菜单的图标
  • rtl bool 设置toolbar的排列顺序为从右到左。除了将这一属性设为true以外,你还需要在AndroidManifest.xml中添加:android:supportsRtl=”true”以及在MainActivity的onCreate方法中调用 setLayoutDirection(LayoutDirection.RTL)
  • subtitle 设置子(副)标题
  • subtitleColor 设置子(副)标题字体颜色
  • title 设置标题
  • titleColor 设置标题字体颜色

实例代码

来,看实例代码前,我们先来看看和我玩好之后,我的样子,怎么样,是不是和Android中的toobar,我哥哥样子一模一样啊?

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
var toolbarActions = [
{title: 'weibo', icon: require('./image/icon_weibo.png'), show: 'always'},
{title: 'loonggg'},
{title: 'blog', icon: require('./image/icon_blog.png'), show: 'always'},
];
export default class ToolbarDemo extends Component {
render() {
return (
<View style={styles.container}>
<ToolbarAndroid
actions={toolbarActions}
navIcon={require('./image/menu_icon.png')}
logo={require('./image/logo.png')}
style={styles.toolbar}
subtitle="非著名程序员"
subtitleColor="#ffffff"
titleColor="#ffffff"
title="涩郎"/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
toolbar: {
backgroundColor: '#c6c5b9',
height: 56,
},
});
AppRegistry.registerComponent('ToolbarDemo', () => ToolbarDemo);
loonggg wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号「 非著名程序员」!
坚持原创技术分享,您的支持将鼓励我继续创作!