底部选项卡导航器上的 expo 图标未显示

Question

I'm currently doing a react-native course and I started implementing my own code for the styling part. I have an issue with icons not showing and I can't seem to find a problem. I have been trying to implement the icon on the bookcase tab, but it doesn't appear on it, and also I don't get an error message on the expo.

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createAppContainer, createSwitchNavigator} from 'react-navigation';
import { View, StyleSheet } from 'react-native';
import { Text, Button, Input } from 'react-native-elements';
import {createStackNavigator} from 'react-navigation-stack';
import { Ionicons } from '@expo/vector-icons';


const switchNavigator = createSwitchNavigator({
ResolveAuth: ResolveAuthScreen,
loginFlow: createStackNavigator ({
  Signin: signin,
  Signup: signup,
}),

mainFlow: createBottomTabNavigator({
  Bookcase: bookcase,
  Explore: explore,
  Profile: profile
}, {
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'grey',
    showIcon: true,
  }},
    {
      Bookcase:{
        screen:bookcase,
        navigationOptions:{
          tabBarLabel:'Bookcase',
          tabBarIcon:({ tintColor })=>(
            <Ionicons name="ios-home" color={tintColor} size={2}/>
          )
        }
      }

  }
  )

});

const App = createAppContainer(switchNavigator)

export default () => {
  return (
    <AuthProvider>
      <App ref ={(navigator) => {setNavigator(navigator)}} />
    </AuthProvider>
  );
};

Answer 1

If you are using react-navigation v5, then is preferred way to implement bottomStackNavigation. This code will render icons and its color according to active as well as inactive state. You have to pass options property to individual screen tab in react-navigation v5.

const BottomNavigator = () => {
  const BottomNavigation = createBottomTabNavigator();

  return (
    <BottomNavigation.Navigator>
      <BottomNavigation.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Exam"
        component={ExamStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="book" color={color} size={size} />
          ),
        }}
      />
    </BottomNavigation.Navigator>
  );
};