带有渐变颜色的图标

Question

有什么方法可以在 react-native / expo 中为图标添加渐变色？

我想制作这样的图标：

Answer 1

使用 MaskedView 和 LinearGradient 包https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/198#issuecomment-590821900 尝试了这个变体。我将这个 sn-p 与来自 native-base 的 Icon 一起使用，这个解决方案非常适合我。

    import React from 'react'
    import { Text, View, StyleSheet } from 'react-native'
    import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
    import LinearGradient from 'react-native-linear-gradient'
    import MaskedView from '@react-native-community/masked-view'

    const size = 40

    export function PowerOff({ ...rest }) {
    return (
    <View style={{ width: size }} {...rest}>
      <MaskedView
        style={{ flex: 1, flexDirection: 'row', height: size }}
        maskElement={
          <View
            style={{
              backgroundColor: 'transparent',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Icon
              name="power"
              size={size}
              color="white"
              style={styles.shadow}
            />
          </View>
        }>
        <LinearGradient
          colors={['#F7C650', 'rgba(247, 198, 80, 0.71)']}
          style={{ flex: 1 }}
        />
      </MaskedView>
    </View>
      )
    }

    const styles = StyleSheet.create({
    shadow: {
    shadowColor: 'black',
    shadowOpacity: 0.5,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 1,
        },
      },
    })