React Native - 为图形创建曲边

Question

问题概述

我正在开发一个应用程序，其中包含以下底部导航栏，但我不确定如何样式化它，因为它比我过去曾经样式化的任何内容都要复杂。我无法样式化白色部分的弧形顶部边缘以及蓝/绿圆圈和白色部分之间的区域。

我在模型中包括了导航栏应该看起来像什么，因为其中一个似乎混合在一起。绿/蓝圆圈和白色部分之间的黑色背景不应该使用此导航栏进行样式化，这应该是导航栏后面看到的背景。

任何帮助将不胜感激！

代码摘要

  <View style={styles.container}>
  </View>

container: {
    width: windowWidth,
    height: windowHeight * 0.1020935961,
    backgroundColor: "white",
    flexDirection: "row",
    justifyContent: "space-around",
    borderTopLeftRadius: -50,
    borderTopRightRadius: -50
  }

完整代码

const CustomTabNav = () => (
  <View style={styles.container}>
    <TouchableOpacity
      style={styles.instant}
      onPress={() => {
        NavigationService.navigate("Home");
      }}
    >
      <Image
        style={styles.homeImage}
        source={require("~/assets/images/homeIcon.png")}
      />
    </TouchableOpacity>
    <TouchableOpacity
      style={styles.ovalCopy}
      onPress={() => NavigationService.navigate("Competitions")}
    >
      <LinearGradient
        start={{ x: 0, y: 1 }}
        end={{ x: 1, y: 0 }}
        colors={[buttonGradientBlueColor, buttonGradientGreenColor]}
        style={styles.linearGradient}
      >
        <Image
          style={styles.plusImage}
          source={require("~/assets/images/plus.png")}
        />
      </LinearGradient>
    </TouchableOpacity>
    <TouchableOpacity
      style={styles.instant}
      onPress={() => NavigationService.navigate("Competitions")}
    >
      <Image
        style={styles.instantImage}
        source={require("~/assets/images/competitions.png")}
      />
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  container: {
    width: windowWidth,
    height: windowHeight * 0.1020935961,
    backgroundColor: "white",
    flexDirection: "row",
    justifyContent: "space-around",
    borderTopLeftRadius: -50,
    borderTopRightRadius: -50
  },
  homeImage: {
    width: windowWidth * 0.05,
    height: windowWidth * 0.05
  },
  instant: {
    flexDirection: "column",
    // alignSelf: 'center',
    justifyContent: "center"
  },
  instantImage: {
    width: windowWidth * 0.05,
    height: windowWidth * 0.05
  },
  ovalCopy: {
    width: 64,
    height: 64,
  },
  linearGradient: {
    borderRadius: 50, //TODO: make sure this is correct
    width: 64,
    height: 64,
    shadowColor: "#0a0b12cc",
    shadowOffset: {
      width: 0,
      height: -10
    },
    shadowRadius: 60,
    shadowOpacity: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  plusImage: {
    width: windowWidth*0.064,
    height: windowWidth*0.064
  }
});

- bzlight

---

请与我们分享您的代码。 - Xenio Gracias

我刚刚更新了我的代码问题，感谢您的建议@XenioGracias！ - bzlight

可能是View上的曲线底部的重复问题。 - I Putu Yoga Permana

请问您能否添加一个可用的链接？ - Xenio Gracias

Answer 1

嘿，我猜你可以用一种比较麻烦的方法来实现它，比如为获取那个曲线白色背景制作一个背景图片。 或者你可以在白色视图上叠加2个“黑灰色”视图。第一个“黑灰色”视图可能是一个拥有非常大borderRadius的视图，第二个视图是一个比“+”按钮略大的100%圆形视图。 这就是我的意思：

<View style={{ flex: 1, backgroundColor:"white",height: HEIGHT ,width:WIDTH, alignItems: 'center', justifyContent: 'flex-start' }}>
            <View style={{ backgroundColor:"black",borderBottomLeftRadius:WIDTH*10,borderBottomRightRadius:WIDTH*10,height: HEIGHT*.6 ,width:WIDTH*2, alignItems: 'center', justifyContent: 'center' }}>
</View>
            <View style={{ backgroundColor:"black",borderRadius:60,height: 120 ,width:120, marginTop:-60,alignItems: 'center', justifyContent: 'center' }}>
                <View style={{ backgroundColor:"white",borderRadius:40,height: 80 ,width:80 ,alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="chevron-left" size={30} />
                </View>
            </View>
            <View style={{ backgroundColor:"transparent",height: 120 ,width:WIDTH, marginTop:-60,flexDirection:"row",padding:20, justifyContent: 'space-between' }}>
                <Icon name="chevron-left" size={30} />
                <Icon name="chevron-left" size={30} />
            </View>
    </View>

您将获得的屏幕截图：屏幕截图

- Ignacio Urpi nachourpi