用户登录

先去修改一下标签栏的背景颜色 .. 在 TabBarIOS 组件上添加一个 barTintColor 属性 .. 它的值是一个颜色,用一个 darkslateblue .. 再改一下被选择的标签项目上的图标的颜色 .. 添加一个 tintColor .. 设置成 white .. 白色 ..

标签栏上的图标现在用的是系统自带的 .. 我们也可以去使用一些自定义的图标 .. 这里我打算使用 base64 编码的小图标 .. 在 iconfinder 上可以找到一些图标 ..

这里有个空心的小星星 .. 标签栏上的图标可以有两个状态,一个是普通的状态,一个是被选择以后的状态,我们可以分别设置这两个状态的小图标 .. 如果不设置的话,会使用普通状态的图标 .. 被选中以后,图标会用 tintColor 属性指定的颜色 ..

iconfinder 为小图标准备了几种格式 .. svg,png .. 这里我想用 base64 编码的小图标 .. 点击这个 Base64 按钮 .. 会弹出一个对话框 .. 里面的代码就是使用 base64 编码之后的小图标 .. 先复制一下 ..

回到编辑器 .. 下面去给小图标资源单独创建一个文件 .. 放到 app 目录下面的 Assets 这个目录的下面 .. 名字是 Icons.js ..

use strict .. 再定义一个变量 .. 名字是 icons .. 它的值是一个对象 .. 添加一个 star 属性 .. 它的值就是刚才复制的 base64 编码之后的代码 ..

在文件的底部,再把这个 icons 作为默认的东西导出来 .. export .. icons as default .. 再打开 index.ios.js .. 先导入 app ,Assets 下面的 Icons .. 导入进来命名为 icons ..

再找到第一个标签项目 .. 注释掉这个 systemIcon .. 添加一个 icon 属性 .. 它的值是一个对象 .. 然后添加一个 uri 属性 .. 它的值就是图标的地址 .. 这里我们可以使用 icons.star .. 这个就是在 icons.js 里面的一个图标 ..

保存 .. 现在,标签栏上会显示一个自定义的小图标 .. 不过有点大 .. 在这个 icon 属性里面,再用一个 scale ,设置一下比例 .. 输入 4.6 .... 再保存一下 .. 现在这个图标的大小正合适 .. 图标的下面可以再添加一个标题 .. 在标签项目上添加一个 title 属性 .. 它的值就是标签项目的标题 .. 这里设置成 推荐电影 ..

我们也可以在这个标签项目上,再添加一个 selectedIcon .. 用这个属性指定一下,被选择的图标 .. 回到浏览器 .. 再去找一个小图标 ..

这里有一个实心的小星星 .. 打开它 .. 点击 Base64 .. 复制一下 .. . 回到编辑器 .. 打开 icons.js .. 再添加一个属性 .. 名字是 starActive .. 它的值就是刚才复制的东西 .. 保存 ..

回到 index.ios.js .. 设置一下这个 selectedIcon 属性的值 ... 它的值是一个对象 .. 里面添加一个 uri 属性 .. 对应的值是 icons.starActive .. 再用一个 scale 属性 .. 它的值是 4.6 .. 保存 ..

点击这个推荐电影 .. 现在这个标签栏上的小图标用的就是在 selectedIcon 里面指定的图标 .. 再去给北美票房这个标签也添加一个自定义图标 .. 回到 iconfinder .. 在这里再去找两个图标 ..

打开其中的一个 .. 然后点击这个 base64 .. 复制 .. 回到编辑器 .. 打开 Icons.js .. 添加一个属性 .. 名字是 board .. 值就是刚才复制的用 base64 编码的小图标 ..

再添加一个 boardActive .. 回到浏览器 .. 打开另一个图标 .. base64 .. 复制 .. 回过来 .. 再粘贴过来 .. 然后保存一下 ..

打开 index.ios.js .. 复制一下上面这个标签项目上的几个属性 .. 把它们粘贴到下面这个标签项目上 .. 然后修改一下 .. icon 属性里面, uri 的值是 icons.board .. 这个标签项目是 北美票房 .. 修改一下这个 title 属性的值 ..

然后再改一下 selectedIcon 属性 .. 这里的 uri 的值换成 icons.boardActive .. 保存 ..

现在标签栏上的这两个标签上面,用的都是自定义的小图标 ..

https://www.iconfinder.com/iconsets/miu

自定义标签栏《 React Native #2 导航 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点