Невозможно отобразить изображения в Tab Navigator при реагирующей навигации в React Native

Question

/**
 * Author: Rahul Shetty
 * Date: 10/10/2019
 *
 * Configure app routes
 * @flow
 */

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Recipes, Restaurants } from 'containers/root';
import FeedIcon from 'assets/icons/feed/icons-feed.png';
import RestaurantIcon from 'assets/icons/restaurant/icons-restaurant.png';
import routes from './routes';

type Screens = {
  [string]: React$Node,
};

const styles = StyleSheet.create({
  iconStyle: { width: 28, height: 28 },
});

const { RECIPES, RESTAURANTS } = routes;
const IMAGE_PATH = {
  [RECIPES]: FeedIcon,
  [RESTAURANTS]: RestaurantIcon,
};

// Common navigation options for stack navigator
const commonNavOptions = {
  defaultNavigationOptions: {
    gesturesEnabled: false,
    drawerLockMode: 'locked-closed',
  },
  headerMode: 'none',
};

const TabBarComponent = ({ navigation, tintColor }) => {
  const { routeName } = navigation.state;

  // You can return any component that you like here!
  return <Image style={styles.iconStyle} source={IMAGE_PATH[routeName]} />;
};

// A function that returns a stack of navigation screens on providing the Object of screen and it's path name
const StackNav = (screens: Screens) =>
  createStackNavigator(screens, commonNavOptions);

// Screens for Recipes
const RecipeStack = StackNav({ [RECIPES]: Recipes });

// Screens for Restaurants
const RestaurantStack = StackNav({ [RESTAURANTS]: Restaurants });

// Tab container
const Root = createAppContainer(
  createBottomTabNavigator(
    {
      RECIPE: RecipeStack,
      RESTAURANT: RestaurantStack,
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarComponent: ({ tintColor }) => (
          <TabBarComponent tintColor={tintColor} navigation={navigation} />
        ),
      }),
      tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
        showIcon: true,
      },
    },
  ),
);

export default Root;

Я не уверен, что я делаю не так. Я пробовал копаться в официальной документации. Я не смог найти ничего стоящего, чтобы решить эту проблему.

Answer 1

Определите навигационные параметры с помощью tabBarIcon внутри.

Вы можете вернуть изображение через tabBarIcon.

tabBarIcon получает функцию с несколькими аргументами и возвращает компонент. В вашем случае это изображение.

Попробуйте это в контейнере вкладок.

tabBarIcon: ({ tintColor }) => {
              return (<Image style={styles.iconStyle} source={IMAGE_PATH[routeName]} />);}
    }