如何获取当溢出设置为可见时显示的线性渐变的边界半径 - React Native IOS

How to get border radius of linear gradient showing when overflow is set to visible - React Native IOS

所以我遇到了这个问题,它只影响应用程序在 IOS 中的外观。在 Android

上似乎没问题

但是在 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,
  }





  

所以为了让它工作,我必须在线性渐变之外拍摄图像并设置 zIndex,position:absolute 等

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

 <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}
        >