无法在React Native中的React导航下在Tab Navigator中渲染图像

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定义navigationOptions。

您可以通过tabBarIcon返回图像。

tabBarIcon接收带有多个参数的函数并返回一个组件。您的情况是图片。

在选项卡容器中尝试。

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