时间戳

首页 > 解决方案 > 从中心开始渐变 - 反应原生中的 LinearGradient

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

问题描述

我需要在我的 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 做到这一点？我试图得到这样的东西 在此处输入图像描述

标签： cssreactjsreact-nativelinear-gradients

解决方案

顾名思义，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
}

推荐阅读