javascript - 如何在 TabNavigator 上显示图标以响应 native

Question

你好程序员，

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

版本

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

“ react 导航”:“^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);

Answer 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/