目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么,在React Native中,我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果,大家可以看到后面带有IOS,所以这个组件不支持Android,当然后面我们会通过自定义该组件来满足实际开发需求。
import {
TabBarIOS
} from 'react-native';
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
>
</TabBarIOS>
</View>
);
}
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系统图标(contacts)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系统图标(downloads)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系统图标(favorites)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系统图标(history)
>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
4. 修改 TabBarIOS 的属性,修改选择后选项卡的颜色。
<TabBarIOS
style={{height:49, width: width}}
tintColor="green" // 被选中标签颜色
>
</TabBarIOS>
![这里写图片描述](http://img.blog.csdn.net/20170514203507107?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhbmd6aGlob25nOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
修改系统自带图标
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
>
</TabBarIOS.Item>
。。。
角标
<TabBarIOS
style={{height:49, width: width}}
tintColor="green"
barTintColor="black"
translucent={false}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
badge="99999999"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系统图标(contacts)
badge="15"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系统图标(downloads)
badge="@$!@"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系统图标(favorites)
badge="aBBc"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系统图标(history)
badge="99+"
>
</TabBarIOS.Item>
</TabBarIOS>
自定义图标(目前只支持本地图片)
<TabBarIOS.Item
renderAsOriginal={true} // 如果为false,只会显示纯色图片
icon={require('image!home')}
>
</TabBarIOS.Item>
自定义高亮图标(目前只支持本地图片,如果没有设置,则会显示选中颜色图标)
selectedIcon={require('image!baker')}
文字(如果设置了系统图标,那么这个属性会被忽略)
title="首页"
class TabBarIOSScene extends Component{
getInitialState(){
return{
selectedTabItem:0
}
},
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
tintColor="green"
barTintColor="black"
translucent={false}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
onPress={() => {this.setState({selectedTabItem:0})}}
selected={this.state.selectedTabItem == 0}
>
<View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系统图标(contacts)
onPress={() => {this.setState({selectedTabItem:1})}}
selected={this.state.selectedTabItem == 1}
>
<View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系统图标(downloads)
onPress={() => {this.setState({selectedTabItem:2})}}
selected={this.state.selectedTabItem == 2}
>
<View style={[styles.childViewStyle, {backgroundColor:'red'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系统图标(favorites)
onPress={() => {this.setState({selectedTabItem:3})}}
selected={this.state.selectedTabItem == 3}
>
<View style={[styles.childViewStyle, {backgroundColor:'green'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系统图标(history)
onPress={() => {this.setState({selectedTabItem:4})}}
selected={this.state.selectedTabItem == 4}
>
<View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
};
实际开发中,我们还需要对相似功能的代码进行抽取,以达到代码的精简。