组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的,大同小异的,只不过是用的语言不太相同罢了,学得快的同学可以去官网直接看官方文档学习了。今天我们讲ToolbarAndroid,顾名思义,这个组件只能在Android平台用,而且跟Android原生中的Toolbar控件基本一样。
大家好,我是ToolbarAndroid,在React Native中是一个包装了仅限Android平台的工具栏控件的React组件。我可以显示一个标志,一个导航图标(譬如汉堡形状的菜单按钮),一个标题与副标题,以及一个功能列表。标题和副标题会在中间显示,徽标和导航图标会在左侧显示,而功能列表则在右侧显示。
如果我的工具栏上只有一个子节点,那么它将在标题与功能列表之间显示。
熟悉Android toolbar的朋友肯定就会熟悉我,因为我和它就像是双胞胎一样的好朋友,毕竟我就是根据它而定制的嘛。
特别注意:尽管我上面的标识(徽标)和导航图标可以显示远程图片,也就是从服务器和网络获取,但是仅限开发者模式,如果在发行(release)模式下,你永远都应该用图片资源来渲染这些图标。使用require('./some_icon.png')会自动帮你包装好,所以只要你不直接用{uri:'http://...'},就没什么问题。
看完我的简单介绍,那就一起来看看我有哪些属性吧,还是那句话,只有熟悉了我的性格特点,知彼知己,才能运用自如嘛。
来,看实例代码前,我们先来看看和我玩好之后,我的样子,怎么样,是不是和Android中的toobar,我哥哥样子一模一样啊?
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);