从中心开始渐变 - React Native 中的 LinearGradient

Question

我需要在我的 React Native 应用程序中为我的一个按钮应用框阴影，但 android 不支持框阴影属性。所以我试图从 LinearGradient 创建一个阴影视图并将按钮放在该视图的中心。像这样

<LinearGradient
      colors={['transparent', backgroundColor]}
      start={{ x: 0.5, y: 0.5 }}
      end={{ x: 1, y: 1 }}
      style={{
        width: '100%',
        padding: 5,
        height: 60,
        justifyContent: 'center',
        alignItems: 'flex-start',
        marginTop: 0,
        borderRadius: 2,
        backgroundColor: 'transparent',
        zIndex: 2,
        bottom: 0,
      }}>
      <Pressable
        onPress={onPress}
        disabled={disabled}
        style={({ pressed }) => [
          {
            borderWidth: state === 'primary_link' ? 0 : pressed ? 4 : borderWidth,
          },
          styles.background,
        ]}>
        <ButtonTitle />
      </Pressable>
    </LinearGradient>

我尝试更改开始值和结束值，但无法从中心开始。有没有办法使用 LinearGradient 做到这一点？我想得到这样的东西

Answer 1

顾名思义，LinearGradient 仅适用于线性渐变。您所描述的是径向渐变。请参阅此问题：https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/29

您可能有如下所述的框阴影：Creating a UI with box shadow in react native

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}