React Native - TabBarIOS
2017-09-27 本文已影响14人
黄晓坚
在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件。
一、TabBarIOS常见的属性
-
View的所有属性都可以被继承
-
barTintColor color 设置tab条的背景颜色
-
tintColor color 设置tab条上被选中图标的颜色
-
translucent bool 设置Tab栏是不是半透明的效果
二、TabBarIOS.Item常见的属性
-
badge number
在图标的右上方显示小红色气泡，显示信息 -
icon Image.propTypes.source
Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略- 常见的
systemicon图标
- 常见的
systemIcon="bookmarks" // 系统图标(bookmarks)
systemIcon="most-recent" // 系统图标(most-recent)
systemIcon="contacts" // 系统图标(contacts)
systemIcon="downloads" // 系统图标(downloads)
systemIcon="favorites" // 系统图标(favorites)
systemIcon="featured" // 系统图标(featured)
systemIcon="history" // 系统图标(history)
systemIcon="more" // 系统图标(more)
systemIcon="most-viewed" // 系统图标(most-viewed)
systemIcon="search" // 系统图标(search)
systemIcon="top-rated" // 系统图标(top-rated)
-
onPress function
当Tab按钮被选中的时候进行回调，你可以设置selected={true}来设置组件被选中 -
selected bool
该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定是忘记了选中任何的一个页面标签Tab -
selectedIcon Image.propTypes.source
设置当Tab按钮被选中的时候显示的自定义图标，如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色 -
style 设置样式风格，继承View的样式各种风格
systemIcon
enum('bookmarks',
'contacts',
'downloads',
'favorites',
'featured',
'history',
'more',
'most-recent',
'most-viewed',
'recents',
'search',
'top-rated')
系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。
- title string
在Tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略 - 运行效果：
TabBars.gif
- 实例代码：
// 引入组件
var Home = require('../Common/HJHome');
var Find = require('../Common/HJFind');
var Me = require('../Common/HJMe');
var Message = require('../Common/HJMessage');
var Homes = require('../Common/HJHomes');
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
NavigatorIOS,
Image,
} from 'react-native';
export default class HJMain extends Component {
// 构造初始化状态
constructor(props) {
super(props);
this.state = {
selectedItem:'Home'
};
}
render() {
return (
<TabBarIOS
// 设置选中颜色
tintColor='orange'
>
{/*首页*/}
<TabBarIOS.Item
icon={{uri:'tabbar_home',scale:3}}
title="首页"
translucent={true} // 透明效果
badge={999} //角标数
// 被选中时的图片
selectedIcon={{uri:'tabbar_home_highlighted',scale:3}}
selected={this.state.selectedItem == 'Home'}
onPress={()=>{this.setState({selectedItem:'Home'})}}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex: 1}}
tintColor='orange'
initialRoute={{
component: Home, //设置根视图
title:'新闻',
leftButtonIcon:{uri:'navigationbar_friendattention_highlighted',scale:3},
rightButtonIcon:{uri:'navigationbar_pop_highlighted',scale:3},
}}
/>
</TabBarIOS.Item>
{/*信息*/}
<TabBarIOS.Item
icon={{uri:'tabbar_message_center' , scale:3} }
title='信息'
translucent={true}
// 被选中时的图片
selectedIcon={{uri:'tabbar_message_center_highlighted',scale:3}}
selected={this.state.selectedItem == 'Message'}
onPress={()=>{this.setState({selectedItem:'Message'})}}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex:1}}
titleColor="white"
initialRoute={{
component:Message,
title:'信息',
}}
/>
</TabBarIOS.Item>
{/*发现*/}
<TabBarIOS.Item
icon={{uri:'tabbar_discover',scale:3}}
title='发现'
translucent={true}
// 被选中时的图片
selectedIcon={{uri:'tabbar_discover_highlighted',scale:3}}
selected={this.state.selectedItem == 'Discover'}
onPress={()=>{this.setState({selectedItem:'Discover'})}}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex:1}}
initialRoute={{
component:Find,
title:'发现',
}}
/>
</TabBarIOS.Item>
{/*我的*/}
<TabBarIOS.Item
icon={{uri:'tabbar_profile',scale:3}}
title='我'
//半透明
translucent={true}
// 被选中时的图片
selectedIcon={{uri:'tabbar_profile_highlighted',scale:3}}
selected={this.state.selectedItem == 'Me'}
onPress={()=>this.setState({selectedItem:'Me'})}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex:1}}
// 导航栏颜色
barTintColor='rgba(255,255,255,0.3)'
initialRoute={{
component:Me,
title:'我',
}}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
module.exports = HJMain;
