我几乎从TabNavigator文档中获取了示例代码,而图标/图像根本没有出现在iOS或
Android上.即使标签覆盖似乎也没有生效.我究竟做错了什么？
这是我一直在使用的文档的链接：
https://reactnavigation.org/docs/navigators/tab
这是我的代码：
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Not displayed',// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon,{tintColor: tintColor}]}
/>
),};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon,};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,height: 26,},});
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,Notifications: {
screen: MyNotificationsScreen,{
tabBarOptions: {
activeTintColor: '#e91e63',});
好吧,在我想把脸撞到键盘上后,我终于想通了.
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,navigationOptions: {
title: 'Favorites',tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26,tintColor: tintColor}}
/>)
},...
要么
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26,tintColor: tintColor}}
/>
),}
};
...
