带有矢量图标的 React Native 自定义图标

Question

我是 React Native 的新手，我正在尝试让图标能够根据收到的 json 数据改变颜色。我已经能够使用 React Native Vector Icons。但是，我有自己想要使用的图标。在链接的回购页面上有一些关于生成您自己的图标的内容，但我不太熟悉它应该如何工作。我的图标是 .png 个文件，我想制作它们，这样我就可以在我的应用程序中动态地给它们一个颜色属性。如果可能的话，我想看看能够做到这一点的过程是什么。我可以使用 repo 中描述的过程吗？

提前致谢！

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，它是聚焦时主页图标的图标...然后您可以将您希望图标所在的组件放入：<Example iconName = 'IconHome' color = 'Focused'/>。当然，这需要您仔细命名您的图标。我不想写一百万个 if 语句，所以这对我来说似乎是最简单的集成。不过，我敢肯定还有更好的解释。祝你好运。

带有矢量图标的 React Native 自定义图标

React Native Custom Icons w/ Vector Icons

react-native

vector-icons