Реагируйте Родные Пользовательские Иконки ж / Векторные Иконки

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, так что это казалось мне самой простой интеграцией. Я уверен, что есть намного лучшие интерпретации там, хотя. Удачи.