时间戳

首页 > 解决方案 > 如何在溢出设置为可见时显示线性渐变的边框半径 - React Native IOS

css - 如何在溢出设置为可见时显示线性渐变的边框半径 - React Native IOS

问题描述

所以我有这个问题，它只会影响应用程序在 IOS 中的外观。在安卓上看起来不错

但是在 IOS 中，LinearGradient 边框半径仅在溢出设置为隐藏时显示

问题在于，它会切断按钮外部的一些按钮中的图像顶部

如何获得要显示的线性渐变的半径以及要显示的图像？

在此处输入图像描述

如上所述，底部的溢出设置为隐藏，而顶部没有

<TouchableOpacity
      onPress={handlePress}
      style={{ width: "100%", height: "100%" }}
    >
      <View style={[styles.buttonParent, { backgroundColor: "#e23000" }]}>
        <LinearGradient
          colors={["#fc4e18", "#fa9f42"]}
                  style={[styles.buttonGrad, { overflow: "hidden" }]}
        >
         
          <View style={{ width: "100%", height: "100%", flex: 0.15 }} />
          <View
            style={{
              flex: 1.8,
              display: "flex",
              flexDirecton: "column",
              alignContent: "center",
              justifyContent: "center",
              width: "100%",
              height: "100%",
            }}
          >
            <Image
              source={no}
              style={{
                width: Math.round(100 * lengthFactor),
                height: Math.round(100 * lengthFactor),
              }}
            />
          </View>

          <View
            style={{
              flex: 2.4,
              width: "100%",
              height: "100%",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}
          >
            <Text style={styles.textSmall}>Socially</Text>
            <Text style={styles.textBig}>Unacceptable</Text>
          </View>
          <View style={{ width: "100%", height: "100%", flex: 0.15 }} />
        </LinearGradient>
      </View>
    </TouchableOpacity>

风格

buttonGrad: {
    height: "100%",
    width: "100%",
    borderRadius: Math.round(20 * lengthFactor),
    position: "absolute",
    bottom: Math.round(5 * lengthFactor),
    justifyContent: "center",
    alignContent: "center",
    alignItems: "center",
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "row",
    overflow: "visible",
    
  },
  buttonParent: {
    height: "100%",
    width: "100%",
    borderRadius: Math.round(20 * lengthFactor),
    overflow: "visible",

    shadowColor: "black",
    shadowOpacity: 1,
    shadowOffset: { width: 2, height: 2 },
    shadowRadius: Math.round(10 * lengthFactor),
    elevation: 8,
  }

标签： cssreact-nativereact-native-ios

解决方案

在此处输入图像描述

所以为了让这个工作我不得不在线性渐变之外拍摄图像并设置 zIndex、位置：绝对等

为线性渐变对象设置溢出隐藏

 <View style={[styles.buttonParent, { backgroundColor: "#0537a5" }]}>

              <Image
                  source={invasive}
                  style={{
                      width: Math.round(125 * lengthFactor),
                      height: Math.round(155 * lengthFactor),
                      position: "absolute",
                      bottom: Math.round(5 * lengthFactor),
                      zIndex: 1000,
                      right:10
                  }}
              />

        <LinearGradient
          colors={["#4d60fe", "#11a8fe"]}
          style={styles.buttonGrad}
        >

推荐阅读