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 ^^^

如果有人知道该怎么做，我将非常感谢您的帮助！我将重新创建一个点心。展览，但它似乎不支持从“ react-native-linear-gradient”导入线性渐变。

将不透明度连接到线性渐变的函数-反应本机

0 个答案: