从中心开始渐变 - 反应原生中的 LinearGradient答案

【问题标题】：start gradient from center - LinearGradient in react native从中心开始渐变 - 反应原生中的 LinearGradient
【发布时间】：2021-06-04 02:22:48
【问题描述】：

我需要在我的 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 做到这一点？我试图得到这样的东西

【问题讨论】：

标签： css reactjs react-native linear-gradients

【解决方案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
}

【讨论】：