我正在使用Flex设计一个React Native页面。我使用Flex来设计整个屏幕，我的问题是我为菜单样式创建了一个半径，如下面的代码所示。我怎么能
function Home() {
return (
<View style={styles.container}>
<View style={styles.header}>
</View>
<View style={styles.footer}>
<Text style={styles.title}>Innovative solution</Text>
</View>
<View style={styles.stomach}></View>
<View style={styles.menu}>
<Text> how to change brown background colour of radius </Text>
</View>
<View style={styles.lastfoot}>
<Text></Text>
</View>
</View>
);
}
export default Home;x1c 0d1x想要改变菜单样式的边界半径的背景颜色棕色，即从容器样式继承
//react native的样式表
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'brown',
},
header: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'brown',
},
lastfoot: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f3f4fc',
},
stomach: {
flex: 5,
backgroundColor: '#f3f4fc',
paddingVertical: 50,
paddingHorizontal: 30,
textAlign: 'center',
shadowRadius: 1,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
},
footer: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
},
title: {
color: 'white',
fontSize: 30,
fontWeight: 'bold',
},
menu: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
overflow: 'hidden',
borderRadius: 28,
overflow: 'hidden',
paddingBottom: 5,
},
});
1条答案
按热度按时间m4pnthwp1#
只需在菜单中添加一个 Package 器元素，然后给予它一个背景
现在为该元素添加一个背景色