反应导航 v5 中的 tabBarIcon 问题答案

【问题标题】：issue with tabBarIcon in react navigation v5反应导航 v5 中的 tabBarIcon 问题
【发布时间】：2020-02-11 11:08:04
【问题描述】：

我想为标签导航设置一个图标，但它返回错误

这是我的代码：

<Tab.Screen name="Home" component={Home} options={{tabBarIcon:'home'}} />

这是我得到的错误：

我该如何解决这个问题？

【问题讨论】：

标签： reactjs react-native react-navigation tabnavigator

【解决方案1】：

您必须在 tabBarOptions 中将 showIcon 属性设置为 true，如下所示：

  <Tab.Navigator tabBarOptions={{ showIcon: true }}>

然后你可以像这样为你的屏幕设置图标：

<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon:(tabInfo) => (<MaterialIcons name="home" size={18} color={tabInfo.tintColor} />)}}/>

完整代码示例：

 import React from "react";
    import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
    import HomeScreen from "../screens/HomeScreen";
    import { MaterialIcons } from "@expo/vector-icons";

    const Tab = createMaterialTopTabNavigator();

    const MyTabs = (props) => {
      return (
        <Tab.Navigator
          tabBarOptions={{ showIcon: true, showLabel: false }}
        >
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              tabBarIcon: (tabInfo) => (
                <MaterialIcons name="home" size={18} color={tabInfo.tintColor} />
              ),
            }}
          />
        </Tab.Navigator>
      );
    };

    export default MyTabs;

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。
你是最棒的

【解决方案2】：

需要导入真实的方式（TabBarIcon文件）

import React from 'react';
import { Ionicons } from '@expo/vector-icons';

export default function TabBarIcon(props) {
    return (
        <Ionicons
            name={props.name}
            size={26}
            color={props.focused ? 'red' : 'black'}
            style={{ marginBottom: -3 }}
        />
    );
}

你需要选择正确的图标（ios和md）（router.js的一部分）


import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createSwitchNavigator } from 'react-navigation';
import TabBarIcon from "./components/TabBarIcon";
import Home from './components/Home';
import Register from './components/Register'

// Home page
const HomeStack = createStackNavigator({
    Home: Home,
});

HomeStack.navigationOptions = {
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
                Platform.OS === 'ios'
                    ? `ios-home`
                    : 'md-home'
            }
        />
    ),
};

HomeStack.path = '';

【讨论】：

伙计，我提到我正在寻找版本 5 的解决方案，但您在版本 4 中编写了代码
第 5 版：reactnavigation.org/docs/en/…
几乎以同样的方式检查此链接 ;)

【解决方案3】：

正如上面给出的解决方案之一，我们可以创建一个 TabBarIcon 组件，并为其赋予 name 和 focus 的 props。

import React from "react"
import { Ionicons } from "@expo/vector-icons"

export default function TabBarIcon({ name, focused }) {
  return (
    <Ionicons
      name={name}
      size={25}
      color={focused ? "tomato" : "black"}
      style={{ marginBottom: -10 }}
    />
  )
}

然后将其导入到 App.js 文件中，在 tabBarIcon 选项上，返回 TabBarIcon 组件

import { StatusBar } from "expo-status-bar"
import React from "react"
import { NavigationContainer } from "@react-navigation/native"
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { StyleSheet } from "react-native"

import HomeScreen from "./app/screens/HomeScreen"
import TabBarIcon from "./app/components/TabBarIcon"

const Tab = createBottomTabNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          showIcon: true,
          activeTintColor: "tomato",
          inactiveTintColor: "gray",
          labelStyle: {
            fontSize: 12,
            padding: 10,
          },
        }}
      >
        <Tab.Screen
          initialRouteName="Home"
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: ({ focused }) => (
              <TabBarIcon
                focused={focused}
                name={Platform.OS === "ios" ? `ios-home` : "md-home"}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

【讨论】：

【解决方案4】：

即使我尝试了上面在答案中描述的内容，我仍然得到标签栏中显示的标签。当我将labeled={false} 作为道具添加到导航器时，它才消失。

例子

<Tab.Navigator
    initialRouteName="Home"
    labeled={false}
    sceneAnimationEnabled={false}
  >
etc
</Tab.Navigator>

【讨论】：

【解决方案5】：

这里是：

import Icon from 'react-native-vector-icons/Ionicons';

<Tab.Screen 
    name="Home" 
    component={Home} 
    options={{
        tabBarIcon: ({ focused, color }) => (
            <Text style={{ marginTop: 6 }}> // Your Style Here
                <Icon name={'md-add-circle'} color={color} />
            </Text>
        )
    }} 
/>

希望你喜欢！！！

【讨论】：