Функция, которая соединяет непрозрачность с линейным градиентом - реагирует нативно

Question

Я определил все мои цвета в одном файле с именем «MyColors.js».У меня есть функция «colorWithAlpha», которая соединяет число непрозрачности с цветом, так что когда я вызываю цвет, я могу просто добавить число в конец моего пользовательского цвета.Он работает с именами цветов, которые имеют одну строку rgba, но не имеют имени градиента (поскольку существует несколько строк rgba).Мне нужно написать функцию таким образом, чтобы она могла разделить массив и добавить непрозрачность для каждой строки rgba в градиенте.

MYCOLORS.JS

const palette = {
  red: 'rgba(217, 20, 43, 1)',
  purple: 'rgba(98, 20, 217, 1)',
  blue: 'rgba(20, 112, 217, 1)',

  gradient: [
    'rgba(217, 20, 43, 1)',
    'rgba(98, 20, 217, 1)',
    'rgba(20, 112, 217, 1)',
  ],

  colorWithAlpha(name: string = 'pink', opacity: number = 1) {
    if (!palette[name]) {
      name = 'pink';
    }
    return palette[name].split(', 1)').join(`, ${opacity})`);
   }

};

export { palette };

APP.JS

import * as React from 'react';
import { View, StyleSheet } from 'react-native';

import LinearGradient from 'react-native-linear-gradient';

import { palette } from './MyColors';

export default class App extends React.Component {
  render() {
    return (
    <View style={styles.container}>
      <View style={styles.colorBlock} />
      <LinearGradient
        colors={palette.gradient}
        style={styles.gradient}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  colorBlock: {
    height: 200,
    width: 200,
    backgroundColor: palette.colorWithAlpha('purple', 0.5),
  },
  gradient: {
    height: 200,
    width: 200,
  }
});

Я могу сделать это, чтобы установить цвет «фиолетовый» с непрозрачностью 0,5:

 backgroundColor: palette.colorWithAlpha('purple', 0.5)

Но это не работает с этим (потому что градиент имеет 3 строки rgba):

      <LinearGradient
        colors={palette.colorWithAlpha('gradient', 0.5)}
        style={styles.gradient}
      />

Я думаю, что в файле MyColors.js мне нужно будет отредактировать "colorWithAlpha"Функция, чтобы сказать, если есть несколько строк rgba -> разделить каждую строку rgba, где ", 1" и добавить новый номер непрозрачности для каждой строки rgba.

Я просто не знаю, как записать это вjavascript ^^^

Если кто-нибудь знает, как это сделать, я был бы очень признателен за любую помощь!Я бы воссоздал перекусить.экспо, но, похоже, он не поддерживает импорт Linear Gradient из 'Reaction-native-linear-Gradient'.