Question

我通过将LinearGradient组件的style属性设置为包括以下参数，将边框半径应用于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组件的某些角

1 个答案: