图标未正确加载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文件，每个svg文件是3-4kb，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'; } } ，

我创建了一个CustomIcon.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>
        )
    }
}

如您所见，如果您有更多的图像，这将需要一些时间。

获取图像Home.js

avatar

您可以创建一个Icon组件，并将其传递给道具以制作自己的Icon。但是由于我仅使用const，因此足以具有功能。但是可以大大改善。