react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器
2023-09-11 14:15:30 时间
1.修改后的 Main.js
/** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Platform, //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件类==============*/ import TabNavigator from 'react-native-tab-navigator'; import CustomerComponents, { Navigator } from 'react-native-deprecated-custom-components'; // 引入外部的组件(此处注意是相当于了项目根目录) 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> {/*--首页--*/} {this.renderTabBarItem('首页','icon_tabbar_home','icon_tabbar_home_selected','home','首页',Home,1)} {/*--消息--*/} {this.renderTabBarItem('消息','icon_tabbar_message','icon_tabbar_message_selected','message','消息',Message,2)} {/*--发现--*/} {this.renderTabBarItem('发现','icon_tabbar_find','icon_tabbar_find_selected','find','发现',Find)} {/*--我的--*/} {this.renderTabBarItem('我的','icon_tabbar_mine','icon_tabbar_mine_selected','mine','我的',Mine)} </TabNavigator> ); }, // 封装tabBarItem renderTabBarItem(title,iconName,selectedIconName,selectedTab,componentName,component,badgeText){ return( <TabNavigator.Item title={title} renderIcon={() => <Image source={{uri:iconName}} style={styles.iconStyle} />} renderSelectedIcon={() => <Image source={{uri:selectedIconName}} style={styles.iconStyle} />} selected={this.state.selectedTab === selectedTab} onPress={() => this.setState({ selectedTab: selectedTab })} selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式 badgeText={badgeText} > <Navigator initialRoute={{name: componentName, component:component}} configureScene={()=>{ return Navigator.SceneConfigs.PushFromRight; }} renderScene={(route, navigator) =>{ let Component = route.component; return <Component {...route.passProps} navigator={navigator} /> }} /> </TabNavigator.Item> ) } }); 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;
2.效果图
.
相关文章
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
- 【软件测试】快速迭代的敏捷项目?测试怎么做?测试人怎么提升自我价值......
- 宝塔webhook自动化打包Vue项目时,npm不生效问题
- react-native 项目实战 -- 新闻客户端(1) -- 初始化项目结构
- 77分布式电商项目 - CAS 客户端与 SpringSecurity 集成
- 74分布式电商项目 - CAS客户端Demo
- 《R语言数据挖掘:实用项目解析》——第2章,第2.7节列联表、二元统计及数据正态性检验
- Linux系统实战项目——sudo日志审计
- React vscode 创建 react 项目流程
- 基于Java实现的ping项目【100010686】
- 使用idea上传项目到码云(gitee)
- 苹果最新框架教程之 ScreenCaptureKit使用含项目源码
- SwiftUI 全站项目之Django服务器和客户端Moya Alamofire URLSession 支持GET和POST Kingfisher (教程含源码)
- 《R语言数据挖掘:实用项目解析》——1.2 R语言引论
- React实践:Vite创建React项目、react事件传递参数的两种方式
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
- STM32物联网项目-通过ESP12S模块连接TCP服务器
- 基于自动配置jar包和SpringBoot以及注解一分钟快速搭建企业项目开发环境,主要包含DataBase、mybatis、Dubbo、log4j、RabbitMQ、redis及相关客户端配置等等
- U3D客户端框架之商业项目中的 FSM 有限状态机 实现代码
- Android studio 编译项目时报错: Gradle 'XXX' project refresh failed