React Native 的组件之底部导航栏 TabBarIOS(一)
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(一)的更多相关文章
- React Native(四)——顶部以及底部导航栏实现方式
效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...
- Flutter——BottomNavigationBar组件(底部导航栏组件)
BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...
- React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用
import React from 'react'; import { View, Text,Button } from 'react-native'; import { DrawerNavigato ...
- 微信小程序自定义底部导航栏组件+跳转
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
- Vue 如何实现一个底部导航栏组件
参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...
- 【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...
- React-native 底部导航栏(二)
1.组件安装:npm install react-native-router-flux --save 2.定义菜单图片和文字: import React, { Component } from 're ...
- Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
随机推荐
- RMAN备份与恢复实践(转)
1 RMAN备份与恢复实践 1.1 备份 1.1.1 对数据库进行全备 使用backup database命令执行备份 RMAN> BACKUP DATABASE; 执行上述命令后将对目标 ...
- Logistic Regression Using Gradient Descent -- Binary Classification 代码实现
1. 原理 Cost function Theta 2. Python # -*- coding:utf8 -*- import numpy as np import matplotlib.pyplo ...
- Java接口多线程并发测试 (一)
本文为作者原创,禁止转载,违者必究法律责任!!! 本文为作者原创,禁止转载,违者必究法律责任!!! Java接口多线程并发测试 一,首先写一个接口post 请求代码: import org.apach ...
- VMware coding Challenge: Coin Toss Betting
static int CoinTossEndAmount(int betAmount, String coinTossResults) { if (betAmount <=0 || coinTo ...
- Linux系统——MySQL基础(二)
# MySQL数据库完全备份与恢复## 数据库备份的分类1. 从物理与逻辑的角度,备份可以分为物理备份和逻辑备份.(1)物理备份:对数据库操作系统的物理文件(数据文件.日志文件)的备份.物理备份又可分 ...
- win10安装激活与关闭自动更新
1.安装时即使选择了不保留任何文件,也不会删除掉非c盘里的东西 2.安装后需要执行KMS10_Crack2激活下 3.关闭自动更新. 在服务中禁用 https://zhidao.baidu.com/q ...
- python之路 socket、socket server
一.socket socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制,取后一种意思.通常也 称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可 ...
- jQuery 批量操作checkbox
困扰很久的问题: 如果只是 $('input[type=checkbox]').attr('checked',true);//全选 $('input[type=checkbox]').attr('ch ...
- Java求解迷宫问题:栈与回溯算法
摘要: 使用栈的数据结构及相应的回溯算法实现迷宫创建及求解,带点JavaGUI 的基础知识. 难度: 中级 迷宫问题是栈的典型应用,栈通常也与回溯算法连用. 回溯算法的基本描述是: (1) 选择一个 ...
- python yield yield from
1.可迭代对象 具备可迭代的能力,即enumerable,在python中指的是可以通过for-in去逐个访问元素的一些对象,比如元组tuple,列表list,字符串string,文件对象file等. ...