Tab Navigator 上的 React Native for Windows 应用程序在 React Navigation 6.1.9 中显示矩形图标

Question

我正在尝试在我的项目（React Native for Windows 应用程序）中使用来自 的图标（Ionicons by Ionic） 它在 Android 中运行得很好，但在桌面应用程序中显示的是矩形。我确实添加了字体文件（...\TestNavigation1\windows\TestNavigation1\Assets\Ionicons.ttf）。尽管如此，图标仍然不会显示。什么可能导致此问题？我需要采取任何其他步骤才能显示图标吗？谢谢你。

图片：

设置BottomTabNavigator

import { View, Text } from 'react-native'
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ROUTES } from '../constants';
import { HomeScreen, WalletScreen, NotificationsScreen, SettingsScreen } from '../screens';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarActiveTintColor: '#e91e63',
                tabBarIcon: ({ color, size, focused }) => {
                    let iconName;
                    if (route.name === ROUTES.HOME_TAB) {
                        iconName = focused ? 'home' : 'home-outline';
                    } else if (route.name === ROUTES.SETTINGS) {
                        iconName = focused ? 'settings' : 'settings-outline';
                    } else if (route.name === ROUTES.WALLET) {
                        iconName = focused ? 'wallet' : 'wallet-outline';
                    } else if (route.name === ROUTES.NOTIFICATIONS) {
                        iconName = focused ? 'notifications' : 'notifications-outline';
                    }
                    return <Icon name={iconName} size={size} color={color} />;
                },
            })}
            >

            <Tab.Screen name={ROUTES.HOME_TAB} component={HomeScreen} />
            <Tab.Screen name={ROUTES.WALLET} component={WalletScreen} />
            <Tab.Screen name={ROUTES.NOTIFICATIONS} component={NotificationsScreen} />
            <Tab.Screen name={ROUTES.SETTINGS} component={SettingsScreen} />
        </Tab.Navigator>

    )
}

export default BottomTabNavigator

在主页上

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {COLORS} from '../../constants';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const HomeScreen = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: COLORS.bgColor,
      }}>
      <Text>Home!</Text> 
      <MaterialCommunityIcons name="home" color='#e91e63' size={20} />

    </View>
  );
};

export default HomeScreen;

我需要桌面应用程序显示图标相同的Android应用程序

Answer 1

您添加了错误的字体，因此Window应用程序无法按照您的意愿显示。

您使用了

MaterialCommunityIcons

，因此您需要将

MaterialCommunityIcons.ttf

添加到

assets

文件夹，而不是

Ionicons.ttf