Question

我一直在研究这个简单的移动应用程序。我正在尝试在底部标签导航中显示一些图标，而不是标签，但是这些图标没有显示。有人可以帮我找出问题所在吗？

这是我的代码：

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

import { Icon } from 'react-native-elements';

// Components
import Home from './src/components/home/Home'
import EventInfo from './src/components/common/eventInfo/EventInfo'
import Profile from './src/components/profile/Profile'
import Browse from './src/components/browse/Browse'
import Activity from './src/components/activity/Activity'

import homeIcon from './src/images/home.png'
import browseIcon from './src/images/home.png'
import activityIcon from './src/images/home.png'
import profileIcon from './src/images/home.png'

import myIcon from './src/images/activity.png';

const HomeStackNavigator = createStackNavigator({
  Home: {
    screen: Home
  },
  EventInfo: {
    screen: EventInfo
  },
},{
  initialRouteName: 'Home', 
})

const BrowseStackNavigator = createStackNavigator({
  Browse: {
    screen: Browse
  },
},{
  initialRouteName: 'Browse', 
})

const ActivityStackNavigator = createStackNavigator({
  Activity: {
    screen: Activity
  },
},{
  initialRouteName: 'Activity', 
})

const ProfileStackNavigator = createStackNavigator({
  Profile: {
    screen: Profile
  },
  EventInfo: {
    screen: EventInfo
  },
},{
  initialRouteName: 'Profile', 
})

const AppNavigator = createBottomTabNavigator({
  Home : HomeStackNavigator,
  Browse: BrowseStackNavigator,
  Activity: ActivityStackNavigator,
  Profile : ProfileStackNavigator,
},{
  initialRouteName:'Profile',
  defaultNavigationOptions: ({ navigation }) => ({
    tabBaricon: ({ focused, horizontal, tintColor }) => {
        return (
          <Image 
            source={myIcon}
            style={{width:30, height:30}} 
          />
        );
    },
  }),
  tabBarOptions: {
  }
}

);

export default createAppContainer(AppNavigator);

Answer 1

这应该可以解决您的问题。您还应该考虑阅读文档here和here以便更好地理解。

...

const AppNavigator = createBottomTabNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: {
    tabBarIcon: ({ focused }) => (
      <Icon
        name='rowing' />
      )
      }
  },
  EventInfo: {
    screen: EventInfo,
    navigationOptions: {
    tabBarIcon: ({ focused }) => (
    <Icon
      name='rowing' />
      )
    }
},
}, {
  initialRouteName:'Profile',
});

...

请告诉我是否有帮助。

在React Native的BottomTabNavigator中图标未显示

1 个答案: