React native 如何在React native中剪切视图的一部分
我正在用React Native开发一个应用程序。在应用程序菜单中,我们在每个按钮周围都有一个半圆视图,我不知道如何实现它 第二个问题是阴影。我使用React native 如何在React native中剪切视图的一部分,react-native,React Native,我正在用React Native开发一个应用程序。在应用程序菜单中,我们在每个按钮周围都有一个半圆视图,我不知道如何实现它 第二个问题是阴影。我使用elevation属性。几乎每个地方都可以,但这里不行 这就是我能创造的 您知道如何实现这一点吗?实现这种设计的方法之一是使用绝对位置和高程 下面是我用来测试它的代码。它可能会帮你想出一个主意 组件 import React, { Component } from 'react'; import { Text, View } from 'reac
elevation
属性。几乎每个地方都可以,但这里不行
这就是我能创造的
您知道如何实现这一点吗?实现这种设计的方法之一是使用绝对位置和高程 下面是我用来测试它的代码。它可能会帮你想出一个主意 组件
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class App extends Component<Props> {
render() {
return (
<View style={styles.backgroundContainer}>
<View style={styles.appMenu}>
<View style={styles.curve} />
<View style={styles.iconContainer}>
<View style={[styles.iconWrapper, styles.icon1]}>
<View style={styles.icon}>
<Text style={styles.text}>i-1</Text>
</View>
</View>
<View style={[styles.iconWrapper, styles.icon2]}>
<View style={styles.icon}>
<Text style={styles.text}>i-2</Text>
</View>
</View>
<View style={[styles.iconWrapper, styles.icon3]}>
<View style={styles.icon}>
<Text style={styles.text}>i-3</Text>
</View>
</View>
</View>
</View>
</View>
);
}
}
希望能有帮助 删除立面,它将创建您不想要的阴影,并为圆角按钮提供borderWidth和borderColor,以创建您想要的视图。感谢您的回答,此实现与我自己创建的实现相同<代码>阴影和
底部的圆形视图
与UI不同。您能告诉我您想让UI类似于第一个图像还是第二个图像吗?现在检查。我修改了答案,使它看起来与你问题中的第一张图片相似。
import { StyleSheet, Dimensions } from 'react-native';
const window = Dimensions.get('window');
const { width, height } = window;
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
backgroundColor: 'black',
},
appMenu: {
height: 300,
width: width,
justifyContent: 'flex-end',
backgroundColor: '#f5f5f5',
overflow: 'hidden',
},
curve: {
position: 'absolute',
left: - width * 0.5,
bottom: - width * 1.5,
height: width * 2,
width: width * 2,
borderTopLeftRadius: width ,
borderTopRightRadius: width,
backgroundColor: 'white',
elevation: 40,
},
iconContainer: {
flexDirection: 'row',
elevation: 40,
position: 'absolute',
bottom: 0,
height: 300,
width: width,
justifyContent: 'space-around',
},
iconWrapper: {
width: 74,
height: 74,
borderRadius: 37,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
overflow: 'hidden',
},
icon: {
width: 60,
height: 60,
borderRadius: 30,
elevation: 12,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
icon1: {
marginTop: 85,
},
icon2: {
marginTop: 60,
},
icon3: {
marginTop: 85,
},
text: {
color: '#414141',
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
}
});