Блог

Главная - Вопросы по программированию - Импорт цветового стиля в компоненте react-native не работает

Импорт цветового стиля в компоненте react-native не работает

#reactjs #react-native

Вопрос:

Я унаследовал некоторый собственный код react, в котором некоторые стили, которые, по-видимому, работали раньше, больше не работают. Это та строка кода, о которой идет речь:

 <View style={componentStyles.rightButtonContainer}>

Назначенный стиль выглядит следующим образом:

   rightButtonContainer: {
    backgroundColor: config.defaultStyles.greenGradient,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomRightRadius: 25,
    borderTopRightRadius: 25,
    width: "45%",
    height: 50,
    marginLeft: 2,
  }

Что не работает, так это backgroundColor . Обратите внимание, что он используется config.defaultStyles.greenGradient . Итак, config упомянутое здесь выглядит следующим образом:

 import colors from '../../styles/Colors';
export default {
  defaultStyles: {
    greenGradient: colors.greenGradient,
  }
};

Вышесказанное , в свою очередь, импортирует colors , что выглядит следующим образом:

 export default {
  primary: 'rgb(61, 77, 138)', 
  secondary: 'rgb(20,169,53)', 
  greenGradient: ['rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,159,53,1)', 'rgba(20,159,53,1)'],
  yellowGradient: ['rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(219,159,42,1)', 'rgba(219,159,42,1)'],
  background: '#fff', 
  indicator: 'rgb(220, 160, 42)', 
  text: '#333',
  textInverse: '#fff',
  textPlaceholder: '#9ab',
  textPlaceholderLight: '#ccc', 
  border:'',
  borderLight: '#ccc', 
};

Таким образом, в конечном счете , это должно быть присвоение greenGradient цвета colors , но, как я уже сказал, это не работает. Другими словами, кнопка зеленого цвета не отображается на экране.

ПРИМЕЧАНИЕ: это, вероятно, перестало работать после обновления некоторых библиотек и базового пакета Expo. Изменилось ли что-то с точки зрения того, как обрабатывается стиль?

В чем здесь проблема?

Ответ №1:

React-native не поддерживает градиент. Вам нужно использовать сторонний модуль, такой как react-native-линейный градиент.

https://www.npmjs.com/package/react-native-linear-gradient

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

1. Спасибо. Поддерживали ли они это в какой-то момент, а затем прекратили? Я спрашиваю, потому что это, должно быть, работало в какой-то момент, а затем прекратилось.

2. Интересно, что градиент работает и для других частей того же приложения. Так что, должно быть, что-то в том, как его сюда импортируют.

3. В данном случае, я думаю, что этот модуль уже интегрирован в ваш проект. Пожалуйста, взгляните на пакет.json.

Метки: