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

Question

我将边框半径应用到 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 它根本不显示。

Answer 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' 添加到您的样式对象中。它可能会直接解决您的问题。

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

How to apply border radius to certain corners of the Expo LinearGradient component

linear-gradients

react-native

expo