Блог

Главная - Вопросы по программированию - Компоненты в стиле React native tintColor не работают должным образом

Компоненты в стиле React native tintColor не работают должным образом

#css #react-native #styles #styled-components #react-native-ui-kitten

Вопрос:

Это работает нормально(значок белый и имеет правильный размер):

 // Logo definition
import { Icon } from '@ui-kitten/components'

const Logo = props => <Icon {...props} name='logo' pack='app' />

// index.js

  <Logo style={{
    width: 200,
    height: 200,
    tintColor: theme["basic-color-100"]
  }}/>

Затем я превратил элемент в стилизованный компонент:

 // index.js:

    <StyledLogo />

// styles.js

    export const StyledLogo = styled(Logo)`
      width: 200px;
      height: 200px;
      tint-color: ${({theme}) => {theme["basic-color-100"]}
    `

ПРИМЕЧАНИЕ: если я изменю цвет StyledLogo с помощью встроенного стиля, это тоже не сработает

свойство оттенка цвета теперь полностью игнорируется (значок имеет правильный размер, но полностью черный). Как я могу это решить?

Комментарии:

1. Является ли проблема tint-color или использование пользовательского интерфейса котенком? Если вы используете tint-color: red; его, меняет ли он ваш значок на красный?

2. Нет, это не меняется(я предполагаю, что вы имеете в виду StyledLogo в styles.js). Я не знаю, связана ли проблема с цветом оттенка или с пользовательским интерфейсом котенка. Я считаю, что более вероятно, что это связано со стилем и цветом оттенка

Метки: