图标未正确加载react-native-vector-icons

时间:2018-08-13 13:46:01

标签: javascript reactjs react-native vector-icons

我正在使用React-Native来构建应用程序。我继续使用FlatIcon来获取一些自定义图标,这些图标已上传到IcoMoon,并按照安装步骤在react-native上正确实现了。

问题是我得到的结果与我安装的结果完全不同。

这是我在应用程序上得到的图标:

enter image description here

但是我应该得到这个结果:

enter image description here

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>
    );
  }
}

如您所见,它没有颜色,布局也有很大不同。我尝试了其他图标,但结果相同。

1 个答案:

答案 0 :(得分:0)

我找到了获得所需结果的替代方法。它仍然不能解决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,因此足以具有功能。但是可以大大改善。