React本地底部选项卡导航器-图标不显示

agyaoht7 于 2023-03-03 发布在 React

关注(0)|答案(4)|浏览(194)

/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import * as React from 'react';

import Home from '../screens/home';
import Review from '../screens/reviewDetails';
import Profile from '../screens/profile';
import Settings from '../screens/settings';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { COLORS, icons } from '../constants';
import { Image } from 'react-native';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

export default function HomeStack() {
  return (
    <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Home" component={Home} options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }} />
        <Tab.Screen name="Review Details" component={Review} options={{
          tabBarLabel: 'Review',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }} />
        <Tab.Screen name="Profile" component={Profile} options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }} />
        <Tab.Screen name="Settings" component={Settings} options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }} />
      </Tab.Navigator>
  );
}

我的代码为一个底部标签导航器运行没有任何错误然而当运行在这emmulator这图标在这导航器上不显示他们被替换为一个交叉框？这标签导航器也是包含在一个抽屉内容导航器这是反过来的这子一个根堆栈导航器.所有的从属关系已经被安装然而这错误持续

react-native

来源：https://stackoverflow.com/questions/66279224/react-native-bottom-tab-navigator-icons-not-displaying

4条答案

按热度按时间

3mpgtkmj1#

阅读Tab.Navigator的文档，您应该在其中定义图标。它看起来像这样：

<Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

这意味着您将根据路线名称更改组件，其背后的原因是Tab.Screen应该具有关于将要显示的屏幕的信息，而Tab.Navigator应该处理导航器（底部带标签的条带）的导航部分。

赞(0）回复(0）举报 2023-03-03

vu8f3i0k2#

当react-native-vector-icons未正确链接时，android上可能会出现交叉框。
运行此命令

react-native link react-native-vector-icons

并在android/app/build. gradle文件中添加此内容。

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

我希望这能解决你的交叉框问题。

赞(0）回复(0）举报 2023-03-03

iih3973s3#

您的代码中缺少return语句。您可以按如下方式执行此操作：

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

所以更新这行，

<MaterialCommunityIcons name="home" color={color} size={26} />

到这个

return <MaterialCommunityIcons name="home" color={color} size={26} />

赞(0）回复(0）举报 2023-03-03

yhxst69z4#

打开setting.gradle并添加以下行
包含'：React Native-svg'项目（'：React Native-svg'）.projectDir =新文件（根项目.项目目录，'../节点模块/React Native-svg/android'）包含'：React Native-向量-图标'项目（'：React Native-向量-图标'）.项目目录=新文件（根项目.项目目录，'../节点模块/React Native-向量-图标/android'）包含构建（'../节点模块/React Native-gradle-插件'）适用于：文件（“../节点模块/@React原生社区/cli-platform-android/原生模块.gradle”）;应用本机模块设置Gradle（设置）包含“：app”if（设置.hasProperty（“newArchEnabled”）&&设置.newArchEnabled ==“true”）{包含（“：ReactAndroid”）项目（“：ReactAndroid”）.项目目录=文件（'.../节点模块/React Native/ReactAndroid'）}

赞(0）回复(0）举报 2023-03-03

我来回答

React本地底部选项卡导航器-图标不显示

4条答案

相关问题

热门标签

最新问答