import {
StackNavigator,
TabNavigator,
} from 'react-navigation';
const MyTab = TabNavigator({
List: {screen: List, navigationOptions: {
tabBarLabel: '列表',
tabBarIcon: ({ tintColor, focused }) => (
<Image resizeMode='contain'
source={require('./img/activity.png')}
style={[styles.footImage, {tintColor: tintColor}]}
/>
)
}},
Cinerms: {screen: Cinerms, navigationOptions: {
tabBarLabel: '電影',
tabBarIcon: ({ tintColor, focused }) => (
<Image resizeMode='contain'
source={require('./img/document.png')}
style={[styles.footImage, {tintColor: tintColor}]}
/>
)
}},
MyMovies: {screen: MyMovies, navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({ tintColor, focused }) => (
<Image resizeMode='contain'
source={require('./img/addpeople.png')}
style={[styles.footImage, {tintColor: tintColor}]}
/>
)
}},
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true,
activeTintColor: '#0390eb',
inactiveTintColor: 'white',
labelStyle: {
fontSize: 11,
paddingVertical: 0,
marginTop: -4,
},
style: {
height: 45,
backgroundColor: '#222',
zIndex: 0,
position: 'relative'
},
tabStyle: {
backgroundColor: '#222',
},
indicatorStyle: {
backgroundColor: '#222',
}
}
});
TabNavigatorConfig
| 參數(shù)名稱 | 參數(shù)說明 |
|---|---|
| tabBarPosition | 設(shè)置TabNavigator的位置 |
| animationEnabled | 當(dāng)兩個(gè)TabNavigator嵌套時(shí)需要這樣設(shè)置 |
| swipeEnabled | 當(dāng)兩個(gè)TabNavigator嵌套時(shí)需要這樣設(shè)置 |
| backBehavior | 按 back 鍵是否跳轉(zhuǎn)到第一個(gè)Tab(首頁)忱反， none 為不跳轉(zhuǎn) |
| tabBarOptions | 設(shè)置Tab標(biāo)簽的屬性 |
| showIcon | 是否顯示圖標(biāo) |
| activeTintColor | label和icon的前景色 活躍狀態(tài)下（選中） |
| inactiveTintColor | label和icon的前景色 活躍狀態(tài)下（未選中） |
| style | TabNavigator 的樣式（背景顏色） |
| indicatorStyle | 標(biāo)簽指示器的樣式對象（選項(xiàng)卡底部的行）义锥。安卓底部會(huì)多出一條線讨越，可以將height設(shè)置為0或者顏色為背景色來暫時(shí)解決這個(gè)問題 |
| labelStyle | 文字樣式 |
| iconStyle | 圖標(biāo)樣式 |
| labelStyle |
