Использование FontAwesome на панели вкладок с React Native - PullRequest
Новая
       17

Использование FontAwesome на панели вкладок с React Native

0 голосов
/ 16 января 2020

Я новичок, чтобы реагировать на родной и пытаюсь создать панель вкладок, используя createBottomTabNavigator. Я бы хотел, чтобы у каждой вкладки был свой значок.

Я следовал следующему руководству, в котором для отображения значка вкладки используется FontAwesome.

Учебное пособие

Когда я запускаю свое приложение в симуляторе iso, отображаются вкладки, но значки не отображаются.

Tabs

Вот мой код 

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);

Как получить значки для отображения?

Ответы [ 2 ]

0 голосов
/ 17 января 2020 

// 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',
    },
  }
);

Ссылка: https://snack.expo.io/@react-navigation / basi c -tabs-v3

Ссылка: https://reactnavigation.org/docs/en/tab-based-navigation.html

0 голосов
/ 16 января 2020

У меня есть для вас решение, которое немного отличается от того, что вы там делали .. так что 

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 = ""

и их вы можете сделать так в createBottomTabNavigator 

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