如何使左侧曲线就像没有绝对位置的 U 一样？

Question

我想制作图像中出现的曲线，即具有灰色背景的 U 形曲线。如果我没有绝对位置，那么我可以在相同背景上方使用按钮

Answer 1

要获得没有导入的红色曲线，您需要在视图中画一个圆，然后在父视图中执行 overflow:'hidden'。所以圆圈不会溢出。接下来使用 transform 和 translate 将它在 x 和 y 方向上移动到左上角。

此处有完整示例 (https://snack.expo.dev/@heytony01/anxious-kiwi)

export default function App() {
  return (
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        <View style={{width:"90%",height:"15%",backgroundColor:"gray",borderRadius:"3%",flexDirection:"row",
        // Need this so the child view doesn't overflow it
        overflow:"hidden",}}>
            <View style={{
              // Makes a giant circle
              width:"100%",
              height:"200%",
              borderRadius:"100%",
              backgroundColor:"red", 
              // Adds a border with a color white
              borderColor:"white",
              borderWidth:2,
              // Move the cirlce to the left side
              transform:[
                {
                  translateX:-150
                },
                {
                  translateY:-50
                }
              ]
            }}>
            </View>
        </View>
    </View>
  );
}

如何使左侧曲线就像没有绝对位置的 U 一样？

How to make a left side curve as if it were a U without absolute position?

ios

android-styles

react-native