С помощью Styled-Components, как установить массив цветов вне Styled Component?

Question

theme.js - у меня есть тема Styled-Components, которая содержит все цветовые вариации моего приложения.

const colors = {
  purples: {
    60: '#AEA',
    50: '#GSA',
  },

  blues: {
    20: '#asd',
    5: '#fasd',
  }
  ...

Затем у меня есть компонент пользовательского интерфейса, в котором мне нужно определитьмассив цветов в определенном порядке:

import React from 'react';
const colors = ['#GSA', '#AEA', '#asd', '#fasd', '#AEA'];

Позже я использую этот массив colors, чтобы найти правильный цвет для использования в моем компоненте на основе состояния:

const getBackgroundColor = ({ currentPosition }) => {
  const color = colors[(currentPosition) % colors.length];
  return color;
};

Эта функцияиспользуется в моем стилевом компоненте следующим образом:

const StyledCard = styled.div`
  background: ${getBackgroundColor};
  ...
`;

Проблема в том, что мой массив цветов устанавливается без темы стилевых компонентов.

Как определить const colors, используямоя тема, когда она находится за пределами элемента стиля?

Answer 1

Создайте файл js с этим шаблоном:

'use strict';

var React = require('react-native');

var myStyle = React.StyleSheet.create({
   red: {backgroundColor: 'red' },
   blue: {backgroundColor: 'blue' }
)}
module.exports = myStyle;

для использования вашего компонента требуется эта таблица стилей

var customStyle = require('../the/path/to/commonStyleSheet');

Используйте сейчас так:

<View style = {customStyle .red} />
<View style = {customStyle .blue} />

Answer 2

Итак, я сделал это на реагирующем языке и должен быть довольно похожим. У меня есть файл colors.js со всеми цветами, затем я импортирую их как объект, чтобы я мог сказать colors[TheNameOfTheColorIWant]

colors.js

export const fadedPurple = '#9f91ad';
export const success = '#4fa579';
export const failure = '#ca374d';

Компонент кнопки

import * as colors from '../../../assets/styles/colors';

const Button = (props) => {
  const {
    onPress,
    children,
    color
  } = props;

  style = {
    backgroundColor: colors[backgroundColor]
  }

  return (
    <TouchableOpacity style={ style }
                      onPress={ onPress }
                      disabled={ disabled }>
        { children }
    </TouchableOpacity>
  )