Question

我是React Native的新手，我正在尝试使图标能够根据收到的json数据更改其颜色。我已经可以使用React Native Vector Icons。但是，我有自己的图标要使用。在链接的回购页面上，有一些谈论如何生成自己的图标的内容，但是我对它应该如何工作还不熟悉。我的图标是.png文件，我想制作它们，以便可以在应用程序中动态为其提供颜色属性。我想看看如果可能的话，该流程将能够实现的目标。我可以使用回购中描述的过程吗？

谢谢！

Answer 1

因此，要创建自己的图标组件，这可能是一个简单的表示形式：

import React from 'react'
import { View, Image } from 'react-native'

export default class Example extends React.Component{

  renderIcon = (iconName, color) => {
    iconName = this.props.iconName
    color = this.props.color
    return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
  }

  render(){
    return(
      <View>
        {this._renderIcon}
      </View>
    )
  }
}

例如，您的.png图标称为IconHomeFocused，当它被聚焦时，它是主页图标的图标...然后，您希望将其放置在组件中，您希望该图标位于：{ {1}}。当然，这需要您仔细命名图标。我不想写一百万个if语句，因此这对我来说似乎是最简单的集成。我敢肯定，尽管有更好的解释。祝你好运。

反应带有矢量图标的本机自定义图标

1 个答案: