Question

所以我之前问过这个问题，但我会更好地描述我的问题，以便我能得到解决方案。我正在使用 @expo/vector-icons 包。不幸的是，图标未按应有的方式显示。

首先我会分享我的 package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.3",
    "@react-native-community/masked-view": "^0.1.10",
    "expo": "~40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "^9.0.0",
    "expo-linear-gradient": "^8.4.0",
    "expo-status-bar": "~1.0.3",
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "^2.16.1",
    "react-native-vector-icons": "^8.0.0",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-navigation-header-buttons": "^6.0.0",
    "react-navigation-stack": "^2.10.2",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "redux-devtools-extension": "^2.13.8"
  },
  "private": true
}

现在我在自定义组件中使用 @expo/vector-icons 包

import React from 'react';
import { Platform } from 'react-native';
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from '@expo/vector-icons';

import Colors from '../../constants/Colors';

const CustomHeaderButton = props => {
    return <HeaderButton 
        {...props} 
        IconComponent={Ionicons} 
        iconSize={23} 
        color={Platform.OS === 'android' ? 'white' : Colors.primary}
    />
};


export default CustomHeaderButton;

现在我在另一个中调用这个自定义组件。

import React, { useEffect, useState, useCallback } from 'react';
import { View, FlatList, StyleSheet, Platform, Button, ActivityIndicator, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import * as cartActions from '../../store/actions/cart';
import ProductItem from '../../components/shop/ProductItem';
import HeaderButton from '../../components/UI/HeaderButton';
import Colors from '../../constants/Colors';
import * as productsActions from '../../store/actions/products';

const ProductsOverviewScreen = props => {
  ...
ProductsOverviewScreen.navigationOptions = navData => {
  return {
    headerTitle: 'All Products',
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
          onPress={() => {
            navData.navigation.toggleDrawer();
          }}
        />
      </HeaderButtons>
    ),
    headerRight:() => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Cart"
          iconName={Platform.OS === 'android' ? 'md-cart' : 'ios-cart'}
          onPress={() => {
            navData.navigation.navigate('Cart');
          }}
        />
      </HeaderButtons>
    )
  };
};

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

export default ProductsOverviewScreen;

我删除并重新安装了 node_modules 文件夹

rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force &&  npm install

并运行它

expo r -c

但还是没有。有什么建议么？一切正常，但我突然发现了这个。

谢谢，提奥

Answer 1

为了解决这个问题，我必须执行以下操作

从expo-font中删除node-modules/expo/node-modules/expo-font/
从 expo-font 中移除 node-modules/expo/node-modules/package.json 依赖
运行expo r -c

希望这可能对某人有所帮助。

世博会图标显示问号

1 个答案: