react-native - 如何在 react-native 中围绕圆圈制作渐变边框？我正在使用 LinearGradient 但它填充了圆圈

Question

我希望黑色边框是渐变的，我希望圆圈是透明的。我可以使用一个单独的库还是有办法解决这个问题？

<LinearGradient
            colors={['#00FFFF', '#17C8FF', '#329BFF', '#4C64FF', '#6536FF', '#8000FF']}
            start={{x: 0.0, y: 1.0}} end={{x: 1.0, y: 1.0}}
            style={styles.CircleShapeView}
        >

        </LinearGradient>


    CircleShapeView: {
        position: 'absolute', 
        top: 1, 
        left:50, 
        right: 0, 
        bottom: 0, 
        width: Dimensions.get('window').height /3,
        height: Dimensions.get('window').height /3,
        borderRadius: Dimensions.get('window').height / 2,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderWidth: 5,
        borderColor: 'black',

      },

标签： react-nativelinear-gradients

Answer 1

您不能将其作为边框，但您可以在线性渐变内创建一个视图以获得相同的效果。

这是一个可以测试的小吃：https ://snack.expo.dev/@truetiem/border-gradient

<LinearGradient
  colors={['#00FFFF', '#17C8FF', '#329BFF', '#4C64FF', '#6536FF', '#8000FF']}
  start={{ x: 0.0, y: 1.0 }}
  end={{ x: 1.0, y: 1.0 }}
  style={{
    width: 200,
    height: 200,
    borderRadius: 100,
    padding: 5, // This should be the border width you want to have
    overflow: 'hidden',
  }}>
  <View
    style={{
      flex: 1,
      borderRadius: 100,
      backgroundColor: '#ecf0f1',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    <Text>Your content goes here</Text>
  </View>
</LinearGradient>