Question

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

这是我的代码：

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

这是我得到的错误：

我该如何解决？

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

Answer 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 = '';

Answer 3

正如上面给出的解决方案之一，我们可以创建一个 TabBarIcon 组件并为其赋予名称和焦点道具。

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>
  )
}

Answer 4

即使我尝试了上面在答案中描述的内容，我仍然得到标签栏中显示的标签。只有当我将 function is_prime(number){ if (number==2 || number==3){ return true; } if (number==0 || number==1 || number%2==0){ return false; } if ((number+1)%6!=0 && (number-1)%6!=0){ return false; } for(i=3; i-1<=parseInt(number)**.5; i+=2){ if (number%i==0){ return false; } } return true; } for(i=5;i<=20;i++){ if(is_prime(i)){ console.log(i) } } 作为道具添加到导航器时它才消失。

示例

labeled={false}

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

希望你喜欢！！！

反应导航v5中tabBarIcon的问题

5 个答案: