react-native - 如何将边框半径应用于 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'到您的样式对象。它可能会直接解决您的问题。