基础篇章:关于 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,我哥哥样子一模一样啊?

实例代码

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);

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏24K纯开源

Qt Style Sheet实践(一):按钮及关联菜单

导读      正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。...

4105
来自专栏前端儿

layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

5021
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

3174
来自专栏互联网软件技术

本地多图上传预览

2212
来自专栏前端开发之路

前端系列教学 - HTML基础

作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏...

96711
来自专栏每日一篇技术文章

IOS开发必须知道的3DLabel实现过程

最近写了很多关于SceneKit 的入门教程文章,初衷就是想给应用增加一点色彩,今天就教大家实现一个简单的3DLabel 的小框架.如果你的应用中需要实现3D字...

1121
来自专栏大数据钻研

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中...

2824
来自专栏大数据钻研

编写高性能HTML网页应用

你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可...

3344
来自专栏lzj_learn_note

前端开发学习──初识Html

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

2292
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 表单

三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。

4413

扫码关注云+社区

领取腾讯云代金券