react-native 项目实战 -- 新闻客户端(2) -- 完善TabBar
2023-09-11 14:15:30 时间
1.创建 drawable-xxhdpi 文件夹,保存 TabBar 的 icon图标
android -- app -- src -- main -- res -- drawable-xxhdpi
2.修改后的 Main.js
/** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Platform, //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件类==============*/ import TabNavigator from 'react-native-tab-navigator'; // 引入外部的组件(此处注意是相当于了项目根目录) var Home = require('../Component/Home'); var Message = require('../Component/Message'); var Find = require('../Component/Find'); var Mine = require('../Component/Mine'); // ES5 var Main = React.createClass({ // 初始化函数(变量是可以改变的,充当状态机的角色) getInitialState(){ return{ selectedTab:'home' // 默认选中的tabBar } }, render() { return ( <TabNavigator> {/*--首页--*/} <TabNavigator.Item title="首页" renderIcon={() => <Image source={{uri:"icon_tabbar_home"}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_home_selected"}} style={styles.iconStyle} />} selected={this.state.selectedTab === "home"} onPress={() => this.setState({ selectedTab: "home" })} selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式 badgeText="1" > <Home /> </TabNavigator.Item> {/*--消息--*/} <TabNavigator.Item title="消息" renderIcon={() => <Image source={{uri:"icon_tabbar_message"}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_message_selected"}} style={styles.iconStyle} />} selected={this.state.selectedTab === "message"} onPress={() => this.setState({ selectedTab: "message" })} selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式 badgeText="2" > <Message /> </TabNavigator.Item> {/*--发现--*/} <TabNavigator.Item title="发现" renderIcon={() => <Image source={{uri:"icon_tabbar_find"}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_find_selected"}} style={styles.iconStyle} />} selected={this.state.selectedTab === "find"} onPress={() => this.setState({ selectedTab: "find" })} selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式 > <Find /> </TabNavigator.Item> {/*--我的--*/} <TabNavigator.Item title="我的" renderIcon={() => <Image source={{uri:"icon_tabbar_mine"}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_mine_selected"}} style={styles.iconStyle} />} selected={this.state.selectedTab === "mine"} onPress={() => this.setState({ selectedTab: "mine" })} selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式 > <Mine /> </TabNavigator.Item> </TabNavigator> ); }, }); const styles = StyleSheet.create({ // icon默认样式 iconStyle:{ width: Platform.OS === 'ios' ? 30 : 25, height:Platform.OS === 'ios' ? 30 : 25, }, // tabBarItem选中的文字样式 selectedTitleStyle:{ color: 'rgba(212,97,0,1)', } }); // 输出 module.exports = Main;
3.效果图
.
相关文章
- weblogic部署struts2项目訪问action404错误
- react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器
- 77分布式电商项目 - CAS 客户端与 SpringSecurity 集成
- 用IDEA将普通Web项目转Maven项目
- Vue项目--尚品汇(购物车页面的一些操作(修改数量,勾选,删除等))
- Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
- 项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果?
- SwiftUI CloudKit 完整项目 之 读取并显示公用数据 publicCloudDatabase
- SwiftUI 全站项目之Django服务器和客户端Moya Alamofire URLSession 支持GET和POST Kingfisher (教程含源码)
- extjs5(项目中文件的加载过程)
- 个人电脑配置FTP服务器,四张图搞定。项目需要,并自己写了个客户端实现下载和上传的功能!
- Tomcat安装配置上传项目
- 夏普推出商业储能太阳能光伏混合项目融资方案
- API项目中 官方客户端不再是可有可无的
- React实践:Vite创建React项目、react事件传递参数的两种方式
- C++ LinuxWebServer项目(4)数据库连接池与注册登录
- 【hadoop学习项目】7. 实现自定义局部排序和全局排序
- [课堂实践与项目]手机QQ客户端--4期(SQLite的加入,注册,找回,登录界面的修改):建立关于QQ注册类,使用SQLite进行存储,
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- SimonLiu的ESP8266与AliOS Things 学习教程系列之九:AliOS Things rel_2.1.0配置/新建/编译项目的方法