---恢复内容开始---
一、简介
顾名思义tab切换的效果，很常见的组件功能，在微信微博底部导航功能。
二、TabBarIOS与TabBarIOS.Item
见字知意，显然TabBarIOS是包含有TabBarIOS.Item子组件的。官网代码示之：
render: function() { return ( <TabBarIOS unselectedTintColor="yellow" tintColor="white" barTintColor="darkslateblue"> <TabBarIOS.Item title="Blue Tab" icon={{uri: base64Icon, scale: 3}} selected={this.state.selectedTab === 'blueTab'} onPress={() => { this.setState({ selectedTab: 'blueTab', }); }}> {this._renderContent('#414A8C', 'Blue Tab')} </TabBarIOS.Item> <TabBarIOS.Item systemIcon="history" badge={this.state.notifCount > 0 ? this.state.notifCount : undefined} selected={this.state.selectedTab === 'redTab'} onPress={() => { this.setState({ selectedTab: 'redTab', notifCount: this.state.notifCount + 1, }); }}> {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)} </TabBarIOS.Item> <TabBarIOS.Item icon={require('./flux.png')} selectedIcon={require('./relay.png')} renderAsOriginal title="More" selected={this.state.selectedTab === 'greenTab'} onPress={() => { this.setState({ selectedTab: 'greenTab', presses: this.state.presses + 1 }); }}> {this._renderContent('#21551C', 'Green Tab', this.state.presses)} </TabBarIOS.Item> </TabBarIOS> );
三、TabBarIOS的API
我们要对组件进行修改先要看有哪些可能用到的API。
- barTintColor String 标签栏的背景颜色
-
style {} 可以自定义一些样式
-
tintColor String 当前被选中标签的颜色
-
unselectedItemTintColor String 没有被选中的标签的颜色 IOS10以上才有效
-
translucent Boolean 标签栏是否需要半透明化
三、TabBarIOS.Item的API
我们从上面的api可以得知TabBarIOS的属性设置是对标签栏整体的控制。我们如果想单独为标签设置则需要在Item里设置。
-
badge String|Number 标签右上角的气泡（形如微信里未读消息样式）
-
icon Image.propTypes.source 给当前标签指定一个自定义的图标。如果定义了
systemIcon属性， 这个属性会被忽略。 -
onPress Function 触屏点击是触发的事件，此时一般修改组件的状态来使得
selected={true}。 -
selected Boolean 属性决定子试图是否可见（空白页面很可能是没有任何标签被选中或者没有引入子组件）
-
selectedIcon Image.propTypes.source 被选中时显示的自定义图标
-
style {} 自定义的属性
-
title string 在图标下面显示的标题文字。如果定义了
systemIcon属性，这个属性会被忽略。 -
systemIcon enum 预定义的系统图标（如果你使用了此属性，title和selectedIcon都会被覆盖为系统定义的值。）
四、结合上面的API自己动手写个
import React, {Component} from 'react';
import {
AppRegistry,
View,
StyleSheet,
AlertIOS,
Text,
TabBarIOS,
NavigatorIOS,
ScrollView,
TextInput,
ListView,
Image
} from 'react-native';
const Icon = require('react-native-vector-icons/Ionicons')
import List from './src/List/index';
import Publish from './src/Publish/index';
import Setting from './src/Setting/index';
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'Creation'
}
}
render() {
return (
<TabBarIOS
barTintColor="#222222"
tintColor="#ffcd32"
style={styles.container}
>
<Icon.TabBarItem
title="主页"
iconName="ios-home-outline"
selectedIconName="ios-home"
selected = {this.state.selectedTab === 'CreateList'}
onPress={() => {
this.setState({
selectedTab: 'CreateList'
})
}}
>
<List/>
</Icon.TabBarItem>
<Icon.TabBarItem
title="发布"
iconName="ios-add-circle-outline"
selectedIconName="ios-add-circle"
selected = {this.state.selectedTab === 'Creation'}
onPress={() => {
this.setState({
selectedTab: 'Creation'
});
}}
>
<Publish />
</Icon.TabBarItem>
<Icon.TabBarItem
title="个人中心"
iconName="ios-person-outline"
selectedIconName="ios-person"
badge="2"
selected = {this.state.selectedTab === 'Setting'}
onPress={() => {
this.setState({
selectedTab: 'Setting'
})
}}
>
<Setting/>
</Icon.TabBarItem>
</TabBarIOS>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#222222'
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
