react-native 使用TabNavigator
2018-02-09 本文已影响0人
紫薇大舅
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
参数名称 | 参数说明 |
---|---|
tabBarPosition | 设置TabNavigator的位置 |
animationEnabled | 当两个TabNavigator嵌套时需要这样设置 |
swipeEnabled | 当两个TabNavigator嵌套时需要这样设置 |
backBehavior | 按 back 键是否跳转到第一个Tab(首页), none 为不跳转 |
tabBarOptions | 设置Tab标签的属性 |
showIcon | 是否显示图标 |
activeTintColor | label和icon的前景色 活跃状态下(选中) |
inactiveTintColor | label和icon的前景色 活跃状态下(未选中) |
style | TabNavigator 的样式(背景颜色) |
indicatorStyle | 标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0或者颜色为背景色来暂时解决这个问题 |
labelStyle | 文字样式 |
iconStyle | 图标样式 |
labelStyle |