javascript - React Native - 为形状创建弯曲边缘
问题描述
问题总结
我正在构建的应用程序有以下底部导航栏,但我不确定如何设置它的样式,因为它比我过去设计的任何样式都复杂。我在设计白色部分的弯曲顶部边缘以及蓝色/绿色圆圈和白色部分之间的区域时遇到问题。
我包括了模型中导航栏的外观,因为其中一个似乎融入其中。绿色/蓝色圆圈和白色部分之间的白色部分上方的黑色背景不应使用此导航栏设置样式,应该成为导航栏后面看到的背景。
任何帮助将不胜感激!
<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
}
});
解决方案
嘿,我想你可以用一种艰难的方式来做到这一点,比如制作一张背景图片来获得弯曲的白色背景。或者,您可以将 2 个“黑灰色”视图叠加在一个白色视图之上。第一个“黑灰色”可能是一个带有令人难以置信的大边框半径,第二个是 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>
您将获得的截图:截图
推荐阅读
- angular - ag-grid 无限滚动分页不起作用/角度
- python - Python API 请求
- c - 无法使用 strtok 实现预期的解析输出
- java - 如何在 EC2 上远程执行带有命令行参数的程序(java 程序)?
- javascript - React 应用程序需要在 for 循环中填充一个数组
- html - 通过引导在导航栏搜索上使用输入而不是表单
- ios - 如何将我的应用程序配置为 Apple 业务经理帐户
- reactjs - 反应:TypeError:无法将未定义或空值转换为对象
- python - Networkx:NetworkXException:节点列表包含 stochastic_block_model 的重复项
- c# - 如何防止将事件处理程序多次附加到按钮?