如何获取当溢出设置为可见时显示的线性渐变的边界半径 - 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}
>
所以我遇到了这个问题,它只影响应用程序在 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}
>