时间戳

首页 > 解决方案 > 如何将边框半径应用于 Expo LinearGradient 组件的某些角

react-native - 如何将边框半径应用于 Expo LinearGradient 组件的某些角

问题描述

我通过将其样式属性设置为包含以下参数，将边框半径应用于 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-nativeexpolinear-gradients

解决方案

您可以通过将 包装LinearGradient在View组件上并将其应用borderRadius到它而不是直接将其应用到LinearGradient.

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

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

...

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

推荐阅读