如何将边框半径应用于 Expo LinearGradient 组件的某些角答案

【问题标题】：How to apply border radius to certain corners of the Expo LinearGradient component如何将边框半径应用于 Expo LinearGradient 组件的某些角
【发布时间】：2020-01-07 06:28:41
【问题描述】：

我通过将其样式属性设置为包含以下参数，将边框半径应用于 LinearGradient 组件的左上角和左下角：

{
   borderTopLeftRadius: 5,
   borderBottomLeftRadius: 5
}

使用 Expo SDK 32 版，这可以毫无问题地工作。但是在更新项目以使用 Expo SDK 版本 34 后，LinearGradient 组件不再接受这种样式。半径只是没有显示出来。

当我简单地应用borderRadius: 5 时，就会应用样式并且LinearGradient 在所有角上的边框半径都为5。一旦我将它们更改为borderTopLeftRadius 和borderBottomLeftRadius，半径就不会显示出来。

这是我现在的代码：

import React from 'react';
import { View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const StatusBox = () => {
   const { statusStyle } = styles;
   return (
      <View style={{ flex: 1 }}>
         <LinearGradient
            colors={['#222', '#333']}
            start={[0, 0.5]}
            end={[1, 0.5]}
            style={[statusStyle, {}]}
         >
            //...other JSX here
         </LinearGradient>
      </View>
   );
};

const styles = {
   statusStyle: {
      //...other styling here
      borderTopLeftRadius: 5,
      borderBottomLeftRadius: 5
   }
};

export { StatusBox };

控制台中没有警告或错误。该应用程序在 iOS 设备上的 Expo Client 中运行，无需检查。如前所述，当仅应用 borderRadius: 5 时，它可以工作并且边框会显示在所有四个角上，但是当尝试仅将半径应用于两个边框（即borderTopLeftRadius 和borderBottomLeftRadius）时，它根本不会显示。

【问题讨论】：

标签： react-native expo linear-gradients

【解决方案1】：

您可以通过将LinearGradient 包装在View 组件上并将borderRadius 应用于它而不是直接将其应用于LinearGradient 来修复它。

<View style={styles.imageContainerIOS}>
    <LinearGradient ... />
</View>

const imageContainerIOS: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 0,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 0,
    overflow: 'hidden',
},

...

除此之外，您可以尝试将overflow: 'hidden' 添加到您的样式对象。它可能会直接解决您的问题。

【讨论】：