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

Answer 1

嘿，我想您可以用困难的方式做到，例如制作背景图片以获取弯曲的白色背景。或者，您可以在白色视图之上叠加2个“黑灰色”视图。第一个“黑灰色”可能像带有难以置信的大borderRadius，第二个是“ 100％”圆圈，比+按钮稍大。这就是我的意思：

function generate(min, max, sum) {
    var v = min + max === sum
            ? Math.random() * (max - min) + min
            : Math.random() * (sum - max - min) + (min + max) / 2;

    return [v, sum - v];
}

console.log(...generate(6, 8, 15));
console.log(...generate(1, 10, 15));
console.log(...generate(6, 9, 15));

您将获得的屏幕快照：Screenshoot

React Native-创建形状的弯曲边缘

1 个答案: