如何在原生反应中在 TabNavigator 上显示图标答案

【问题标题】：How to Show Icon on TabNavigator in react native如何在原生反应中在 TabNavigator 上显示图标
【发布时间】：2019-05-21 09:43:19
【问题描述】：

程序员们好，

我对 React Navigation 有一些问题，我正在使用createBottomTabNavigator做Tab Navigator，但是图标没有出现！然后用它可以正常工作的图像替换图标，这不是反应原生矢量图标的问题，因为我在其他屏幕中使用它们并且它可以工作，

版本

"react-native-vector-icons": "^6.1.0"

“反应导航”：“^3.0.8”

屏幕

其他屏幕使用RN矢量图标

我的代码

import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";

import Search from "./src/screen/Search";
import Home from "./src/screen/Home";
import Locations from "./src/screen/Locations";

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("./assets/rainy.png")}
            style={{ width: 26, height: 26, tintColor: tintColor }}
          />
        )
      }
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: "Search",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-search" size={25} color="#4F8EF7" />;
        }
      }
    },
    Locations: {
      screen: Locations,
      navigationOptions: {
        tabBarLabel: "Location",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-map" size={25} color="#4F8EF7" />;
        }
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#e91e63",
      showIcon: true,
      showLabel: true,
      labelStyle: {
        fontSize: 14
      },
      style: {}
    },
    navigationOptions: {
      tabVisiable: true,
      activeTintColor: "red",
      animationEnabled: true
    }
  }
);

export default createAppContainer(TabNavigator);

【问题讨论】：

现在可以了 :D，我只是添加 return :D tabBarIcon: () => { return <Icon size={20} name="ios-map" color={"red"} />; }
哦！我没有看到这个，而不是大括号在这个函数中放括号来表示你正在返回一个 JSX tabBarIcon: ({ tintColor }) => ( ;)
@BrayanSalazar 我真的是在做 JSX，但它只是 return 显示图标不起作用，我不知道为什么！
我的意思是第一个图标有效，因为它没有return 并且它在 () 中。其他两个在 {} 之间，那么它是 function，那是因为你放了 return。
哦，对了，谢谢你的解释：D

标签： javascript android reactjs react-native react-redux

【解决方案1】：

你可以像这样使用 MaterialCommunityIcons：

import { MaterialCommunityIcons } from 'react-native-vector-icons';

<Tab.Screen
    name="Feed"
    component={Feed}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="home" color={color} size={size} />
      ),
    }}
  />

您可以在这里找到更多信息：https://reactnavigation.org/docs/bottom-tab-navigator/

【讨论】：

【解决方案2】：

您可以尝试在navigationOptions 中定义图标，这是文档示例

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

使用 routeName 可以放置图标

   if (routeName === 'Home') {
     return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
   }

【讨论】：