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

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