css - React Native 中的提升
问题描述
这是我在 React-Native 屏幕中定义的样式。我已经使用该elevation
属性来实现盒子阴影。但它不能正常工作。
const styles = StyleSheet.create({
scrollContainer: {
flex: 1,
},
container: {
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
padding: 2
},
box: {
margin: 8,
width: Dimensions.get('window').width / 2 - 18,
height: Dimensions.get('window').width / 2 - 18,
justifyContent: "center",
alignItems: "center",
borderStyle: 'dashed',
borderLeftWidth: 1,
borderTopWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
borderTopColor: 'black',
borderBottomEndRadius : 8,
borderTopStartRadius: 8,
borderTopEndRadius: 8,
borderBottomStartRadius: 8,
borderBottomLeftRadius:8,
borderBottomRightRadius:8,
elevation: 5
},
navBar:{
backgroundColor: "#000",
}
});
我也尝试过使用 box-shadow 但出现了同样的问题。
解决方案
尝试将以下属性添加到styles.box
. 您可以更改这些值以获得更好的结果。
// ...
box: {
// ...
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
},
// ...
推荐阅读
- python - 使用 Pandas 读取列标题上方和文件底部具有非分隔文本和空行的 csv
- r - 如何将非 HANA ECC 表提取到 R 中?
- java - 为什么在 docker 容器中 java -Xms 会超出可用内存?
- sql - 在数据透视表上添加没有重复 ItemId 的 Featurevalue?
- javascript - 无法使用 Firestore 时间戳(未定义的“toDate”)
- microservices - Service Mesh 不是微服务领域的单一(讽刺)解决方案吗?
- c - 启动时的 INITIAL_JIFFIES 值
- doi - Scopus DOI 在文章检索 API 中不起作用
- javascript - 尝试打开 .js 文件时出现错误 Object
- node.js - nodejs rhea npm for amqp couldn't create subscription queue on address in activemq artemis