圖標未正確加載react-native-vector-icons

Question

我正在使用React-Native來構建應用程序。 我在FlatIcon上獲取了一些自定義圖標，這些圖標已上傳到IcoMoon，並按照安裝步驟正確地在react-native上實現了它們。

問題是我得到的結果與我安裝的結果完全不同。

這是我在應用程序上得到的圖標：

但我應該得到以下結果：

CustomIcon.js

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

Home.js

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import CustomIcon from '../helpers/CustomIcon';

export default class Home extends React.Component {

  render() {
    return (
      <ScrollView>
        <CustomIcon name="eco-fuel" size={80}  />
      </ScrollView>
    );
  }
}

如您所見，它沒有顏色，布局也有很大不同。 我嘗試了其他圖標，但結果相同。

Answer 1

我找到了獲得所需結果的替代方法。 它仍然不能解決為什么react-native-vector-icons無法顯示正確的圖標布局/顏色的問題。

我沒有使用圖標，而是從IcoMoon下載了.png文件（每個文件大小為1-2kb），而不是svg文件（每個文件大小為3-4kb）。

我創建了一個CustomIcon.js

import React from 'react';
import {Image} from 'react-native'

export default CustomIcon = name => {
  switch (name) {
    case 'coal':
      return <Image source={require('../resources/assests/icons/coal.png')} />;
    case 'gas':
      return <Image source={require('../resources/assests/icons/eco-fuel.png')} />;
    case 'imports':
      return <Image source={require('../resources/assests/icons/electric-tower.png')} />;
    case 'hydro':
      return <Image source={require('../resources/assests/icons/hydroelectric-power.png')} />;
    case 'biomass':
      return <Image source={require('../resources/assests/icons/natural-product.png')} />;
    case 'nuclear':
      return <Image source={require('../resources/assests/icons/nuclear-energy.png')} />;
    case 'other':
      return <Image source={require('../../resources/assests/icons/power-plant.png')} />;
    case 'solar':
      return <Image source={require('../resources/assests/icons/solar-energy.png')} />;
    case 'wind':
      return <Image source={require('../resources/assests/icons/wind-energy.png')} />;
    default:
      return 'none';
  }
}

如您所見，如果您有更多的圖像，這將需要一些時間。

獲取圖像Home.js

import React, { Component } from 'react';
import {  ScrollView } from 'react-native';
import {ListItem } from 'react-native-elements';
import CustomIcon from '../helpers/CustomIcon';

export default class Home extends Component {
  render() {
        return (
            <ScrollView >
            {myList.map((l, i) => (
                <ListItem
                    leftAvatar={CustomIcon(l.name)} // CustomIcon(name)
                    key={i}
                    title={this.Capitalize(l.name)}
                    bottomDivider
                />
            ))}
            </ScrollView>
        )
    }
}

您可以創建一個Icon組件，並傳遞其道具來制作自己的Icon。 但由於我僅使用avatar因此足以具有功能。 但是可以大大改善。