我正在尝试制作我自己的自定义标签栏,看来 tabBarComponent 是通过设置为我自己的组件来实现的方法。使用以下代码,我的标签栏不会显示。
const TabNav = TabNavigator({
LaunchScreen: {
screen: PrimaryNav,
navigationOptions: {
tabBarLabel:'Find',
tabBarIcon: ({ tintColor }) => (
<Icon name='search' size={20} color='white' />
),
},
},
}, {
navigationOptions: {
headerTintColor: 'grey'
},
tabBarComponent: FooterTabs,
tabBarPosition: 'bottom',
swipeEnabled:false,
animationEnabled:false,
lazy:true,
tabBarOptions: {
showIcon:true,
showLabel:false,
style: {
backgroundColor: 'black'
}
}
});
在 FooterTabs.js 中:
export default class FooterTabs extends Component {
render () {
return (
<View style={styles.container}>
<Text>FooterTabs Component</Text>
</View>
)
}
}
我错过了什么?
最佳答案
const TabNav = TabNavigator({
......,
tabBarComponent: props => (
<FooterTabs{...props} />
),
tabBarPosition: 'bottom',
........
});
试试吧。附上您的页脚标签,即 <FooterTabs />
不是 FooterTabs
关于javascript - TabNavigator 如何使用 tabBarComponent?标签栏不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45099753/