在带有 React Native 的标签栏中使用 FontAwesome

Question

I am new to react native and am trying to create a tabbar using createBottomTabNavigator. I would like each tab to have its own icon.

I have followed the following tutorial which uses FontAwesome to display the tab icon.

Tutorial

When I run my app in the iso simulator the tabs display but the icons don't.

Here is my code

 import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer } from 'react-navigation'; import { createBottomTabNavigator } from 'react-navigation-tabs'; import Icon from "react-native-vector-icons/FontAwesome5"; import HomeScreen from './HomeScreen'; import SecondActivity from './second'; const TabNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen, defaultNavigationOptions: { tabBarIcon: ({tintColor}) => <Icon name="home" size={25} color={tintColor} /> } }, Events: { screen: SecondActivity, defaultNavigationOptions: { tabBarIcon: ({tintColor}) => <Icon name="chart-bar" size={25} color={tintColor} /> } } } ); const MyStack = createStackNavigator({ Tabs: { screen: TabNavigator }, Home: { screen: HomeScreen }, Events: { screen: SecondActivity } }, { initialRouteName: 'Tabs', } ); export default createAppContainer(MyStack);

How do I get the icons to display?

Answer 1

I have a solution for you that is a bit different that what you did in there .. so

const config = Platform.select({
  web: { headerMode: "screen" },
  default: {}
})


const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  },
  config
)

HomeStack.navigationOptions = {
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === "ios" ? "ios-calendar" : "md-calendar"}
    />
  )
}

HomeStack.path = ""

and them you can do like this in createBottomTabNavigator

const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
  }, 
  {
    activeColor: '#000'
  }

Answer 2

 // You can import Ionicons from @expo/vector-icons if you use Expo or // react-native-vector-icons/Ionicons otherwise. import Ionicons from 'react-native-vector-icons/Ionicons'; import { createAppContainer } from 'react-navigation'; import { createBottomTabNavigator } from 'react-navigation-tabs'; export default createBottomTabNavigator( { Home: HomeScreen, Settings: SettingsScreen, }, { defaultNavigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, horizontal, tintColor }) => { const { routeName } = navigation.state; let IconComponent = Ionicons; let iconName; if (routeName === 'Home') { iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'; // Sometimes we want to add badges to some icons. // You can check the implementation below. IconComponent = HomeIconWithBadge; } else if (routeName === 'Settings') { iconName = focused ? 'ios-list-box' : 'ios-list'; } // You can return any component that you like here! return <IconComponent name={iconName} size={25} color={tintColor} />; }, }), tabBarOptions: { activeTintColor: 'tomato', inactiveTintColor: 'gray', }, } );

Link : https://snack.expo.io/@react-navigation/basic-tabs-v3

Link : https://reactnavigation.org/docs/en/tab-based-navigation.html