图标未正确加载 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，而不是每个 3-4kb 的 svg 文件。

我创建了一个 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 组件并传递给它的 props 来制作你自己的 Icons。但由于我只使用avatar，这足以拥有一个功能。但可以大大提高。