Question

我正在使用反应导航来处理所有导航并在我的应用程序内显示标签。我使用createStackNavigator，createAppContainer和createBottomTabNavigator创建底部标签栏。

标签正在显示，一切似乎都很好，但是不知何故我无法在底部标签栏中显示图标。我尝试了不同的方法，但是没有一个起作用。我还尝试了没有focus属性，并且showIcon设置为true。

这是我的路由器：

const Router = createStackNavigator(
   /* App screens */
  {
    Landing: {
      screen: LandingScreen, navigationOptions: { gesturesEnabled: false, header: null }
    },
    Login: {
      screen: LoginScreen, navigationOptions: { gesturesEnabled: false, header: null }
    },
    AddCertficate: {
      screen: AddCertficate, navigationOptions: { header: null }
    },
    AddCertificateDetails: {
      screen: AddCertificateDetails, navigationOptions: { header: null }
    },
    AddCertificatePhoto: {
      screen: AddCertificatePhoto, navigationOptions: { header: null }
    },
    CertificateDetails: {
      screen: CertificateDetailsTab, navigationOptions: { header: null }
    },
    AddCertificateConfirmed: {
      screen: AddCertificateConfirmed, navigationOptions: { header: null }
    },
    AddCertificateSubmitted: {
      screen: AddCertificateSubmitted, navigationOptions: { header: null }
    },
    /* Components for bottom tab navigation bar */
    Tab: {
      screen: createBottomTabNavigator(
        {
          Certificates: {
            screen: Certificates,
          },
          Courses: {
            screen: Courses
          },
          Schedule: {
            screen: Schedule
          },
          Profile: {
            screen: Profile
          },
        },
        {
          navigationOptions: ({ navigation }) => ({
          /* Logic for switching between screens in bottom tab bar is bellow */
          tabBarIcon: ({ focused }) => {
            const { routeName } = navigation.state;
            let icon;
            console.log('route name', routeName);
            switch (routeName) {
              case 'Tab':
                icon = focused ?
                  require('../assets/img/certificates_tab.png') :
                  require('../assets/img/landing_logo.png');
                return <Image source={icon} style={{ width: 22, height: 20 }} />;
              case 'Courses':
                icon = focused ?
                require('../assets/img/courses_tab.png') :
                require('../assets/img/landing_logo.png');
                return <Image source={icon} style={{ width: 22, height: 23 }} />;
              case 'Schedule':
                icon = focused ?
                require('../assets/img/schedule_tab.png') :
                require('../assets/img/landing_logo.png');
                return <Image source={icon} style={{ width: 35, height: 35 }} />;
              case 'Profile':
                icon = focused ?
                require('../assets/img/profile_tab.png') :
                require('../assets/img/landing_logo.png');
                return (
                  <Image source={icon} style={{ width: 23, height: 23 }} />
                );
              default:
                break;
            }
          },
        }),
       /* Bottom tab bar config is bellow */
          tabBarOptions: {
            showIcon: true,
            showLabel: true,
            indicatorStyle: { backgroundColor: 'black' },
            style: {
              backgroundColor: 'white',
              fontFamily: FONT_AVENIR_MEDIUM,
              fontSize: 18,
              textAlign: 'center',
            },
            iconStyle: {
              width: 47,
              height: 47,
            }
          },
          tabBarPosition: 'bottom',
          swipeEnabled: false,
          animationEnabled: false,
        }
      )
    }
  },
  {
    initialRouteName: 'Landing',
       /* The header config for Cerficiate tab screen */
       defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: COLOR_PRIMARY_BLUE,
          shadowColor: 'transparent',
          elevation: 0,
        },
        headerTintColor: COLOR_PRIMARY_WHITE,
        headerTitleStyle: {
          color: '#333333',
          fontFamily: FONT_AVENIR_MEDIUM,
          fontSize: 18,
          opacity: 0.9,
          shadowColor: 'transparent',
          elevation: 0
        },
      },
    }
);

export default createAppContainer(Router);

Answer 1

已解决！我使用了defaultNavigationOptions而不是navigationOptions，现在它可以正常工作了。

底部标签栏不显示图标

1 个答案: