運行結果：
Simulator Screen Shot 2017年6月1日 上午10.33.30.png
代碼：
import React, {
Component,
} from 'react';
import {
TabBarIOS,
NavigatorIOS,
View,
Image,
StyleSheet,
} from 'react-native';
class App extends Component {
// 構造
constructor(props) {
super(props);
// 初始狀態
this.state = { selectedBarItem:0 }
}
render() {
return (
<View style={styles.container}>
{/*tabbar 標簽欄*/}
<TabBarIOS
// unselectedTintColor="white" /* 當前沒有被選中的標簽圖標的顏色。僅在iOS 10及以上版本有效*/
tintColor="red" /* 標簽圖標的顏色*/
barTintColor="black" /* 標簽欄的背景色*/
translucent={true}/* 半透明*/>
<TabBarIOS.Item
title="看點"
renderAsOriginal={true}
icon={require('./images/tab_bar_item_circle.png')}
selectedIcon={require('./images/tab_bar_item_circle_select.png')}
selected={this.state.selectedBarItem == 0}
onPress={()=>{
this.setState({
selectedBarItem:0
});
}}
>
<View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
title="廣場"
renderAsOriginal={true}
icon={require('./images/tab_bar_item_news.png')}
selectedIcon={require('./images/tab_bar_item_news_select.png')}
selected={this.state.selectedBarItem == 1}
onPress={()=>{
this.setState({
selectedBarItem:1
});
}}
>
<View style={[styles.conViewStyle, {backgroundColor:'red'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
title="發現"
renderAsOriginal={true}
icon={require('./images/tab_bar_item_discover.png')}
selectedIcon={require('./images/tab_bar_item_discover_select.png')}
selected={this.state.selectedBarItem == 2}
onPress={()=>{
this.setState({
selectedBarItem:2
});
}}
>
<View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
title="我"
renderAsOriginal={true}
icon={require('./images/tab_bar_item_personal.png')}
selectedIcon={require('./images/tab_bar_item_personal_select.png')}
selected={this.state.selectedBarItem == 3}
onPress={()=>{
this.setState({
selectedBarItem:3
});
}}
>
<View style={[styles.conViewStyle, {backgroundColor:'red'}]}>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
}
var styles = StyleSheet.create({
container:{
flex:1,
alignContent:'center',
},
conViewStyle:{
flex:1,
justifyContent:'center',
alignContent:'center',
}
});
module.exports = App;
注意點：
- TabBarIOS.Item 中要添加對應的View，否則會報錯
<TabBarIOS.Item
title="看點"
renderAsOriginal={true}
icon={require('./images/tab_bar_item_circle.png')}
selectedIcon={require('./images/tab_bar_item_circle_select.png')}
selected={this.state.selectedBarItem == 0}
onPress={()=>{
this.setState({
selectedBarItem:0
});
}}
>
<View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>
</View>
</TabBarIOS.Item>
