import React,{Component}from 'react';
import {
AppRegistry, StyleSheet,
Text,
View,
TabBarIOS,
} from 'react-native';
import History from './History'
class TabBarIOSDemo extends Component {
constructor(props){
super(props);
this.state={
selectedTab: '发现',
notifCount: 0,
presses: 0,
};
}
//进行渲染页面内容
_renderContent(color: string, pageText: string, num: number) {
return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<Text style={styles.tabText}>{pageText}</Text> </View>
);
}
render() {
return (
<View style={{flex:1}}> <TabBarIOS
style={{flex:1,alignItems:"flex-end"}}
tintColor="green"/*被选中状态颜色图片和文字*/
barTintColor="#000">
<TabBarIOS.Item
title="主页"
icon={require('./img/1.png')}
selected={this.state.selectedTab === '主页'}
onPress={() => {
this.setState({
selectedTab: '主页',
});
}}
>
{this._renderContent('#414A8C', 'one')}
</TabBarIOS.Item>
<TabBarIOS.Item
title="发现"
icon={require('./img/2.png')}
selected={this.state.selectedTab === '发现'} onPress={() => {
this.setState({
selectedTab: '发现',
notifCount: this.state.notifCount + 1,
});
}}
>
{this._renderContent('#cccccc', '发现', this.state.notifCount)}
</TabBarIOS.Item>
<TabBarIOS.Item
title="我的"
icon={require('./img/3.png')}
selected={this.state.selectedTab === '我的'}
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
onPress={() => {
this.setState({
selectedTab: '我的',
notifCount: this.state.notifCount + 1,
});
}}
>
{this._renderContent('#783E33', '历史记录', this.state.notifCount)}
</TabBarIOS.Item>
<TabBarIOS.Item
title="信息"
icon={require('./img/4.png')}
selected={this.state.selectedTab === '下载'}
onPress={() => {
this.setState({
selectedTab: '下载',
presses: this.state.presses + 1
});
}}>
{this._renderContent('#21551C', '下载页面', this.state.presses)}
</TabBarIOS.Item> </TabBarIOS>
</View>
);
}
}
const styles = StyleSheet.create({
tabContent: {
flex: 1,
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 20,
},
tabText: {
color: 'white',
margin: 50,
},
}); AppRegistry.registerComponent('Allen', () => TabBarIOSDemo )

  

React Native 的组件之底部导航栏 TabBarIOS(一)的更多相关文章

  1. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  2. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  3. React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用

    import React from 'react'; import { View, Text,Button } from 'react-native'; import { DrawerNavigato ...

  4. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  5. Vue 如何实现一个底部导航栏组件

    参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...

  6. 【Flutter学习】基本组件之BottomNavigationBar底部导航栏

    一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...

  7. React-native 底部导航栏(二)

    1.组件安装:npm install react-native-router-flux --save 2.定义菜单图片和文字: import React, { Component } from 're ...

  8. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  9. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

随机推荐

  1. RMAN备份与恢复实践(转)

    1   RMAN备份与恢复实践 1.1  备份 1.1.1 对数据库进行全备 使用backup database命令执行备份 RMAN> BACKUP DATABASE; 执行上述命令后将对目标 ...

  2. Logistic Regression Using Gradient Descent -- Binary Classification 代码实现

    1. 原理 Cost function Theta 2. Python # -*- coding:utf8 -*- import numpy as np import matplotlib.pyplo ...

  3. Java接口多线程并发测试 (一)

    本文为作者原创,禁止转载,违者必究法律责任!!! 本文为作者原创,禁止转载,违者必究法律责任!!! Java接口多线程并发测试 一,首先写一个接口post 请求代码: import org.apach ...

  4. VMware coding Challenge: Coin Toss Betting

    static int CoinTossEndAmount(int betAmount, String coinTossResults) { if (betAmount <=0 || coinTo ...

  5. Linux系统——MySQL基础(二)

    # MySQL数据库完全备份与恢复## 数据库备份的分类1. 从物理与逻辑的角度,备份可以分为物理备份和逻辑备份.(1)物理备份:对数据库操作系统的物理文件(数据文件.日志文件)的备份.物理备份又可分 ...

  6. win10安装激活与关闭自动更新

    1.安装时即使选择了不保留任何文件,也不会删除掉非c盘里的东西 2.安装后需要执行KMS10_Crack2激活下 3.关闭自动更新. 在服务中禁用 https://zhidao.baidu.com/q ...

  7. python之路 socket、socket server

    一.socket socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制,取后一种意思.通常也 称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可 ...

  8. jQuery 批量操作checkbox

    困扰很久的问题: 如果只是 $('input[type=checkbox]').attr('checked',true);//全选 $('input[type=checkbox]').attr('ch ...

  9. Java求解迷宫问题:栈与回溯算法

    摘要: 使用栈的数据结构及相应的回溯算法实现迷宫创建及求解,带点JavaGUI 的基础知识. 难度: 中级 迷宫问题是栈的典型应用,栈通常也与回溯算法连用. 回溯算法的基本描述是: (1)  选择一个 ...

  10. python yield yield from

    1.可迭代对象 具备可迭代的能力,即enumerable,在python中指的是可以通过for-in去逐个访问元素的一些对象,比如元组tuple,列表list,字符串string,文件对象file等. ...