如何在 React Native for android 中设置阴影？
Posted
技术标签:
【中文标题】如何在 React Native for android 中设置阴影？【英文标题】：How to set shadows in React Native for android? 【发布时间】：2017-05-10 06:17:56 【问题描述】：您好我正在尝试为我的工厂设置阴影，但到目前为止我的尝试失败了/p>
这是我尝试过的
<View
style=
width: 56,
height: 56,
elevation: 2,
borderRadius: 28,
marginBottom: 3,
backgroundColor: 'rgba(231,76,60,1)',
></View>
我需要达到的目标
【问题讨论】：
【参考方案1】：添加 CSS 属性 elevation: 1 在 android 中呈现阴影，无需安装任何 3rd 方库。
elevation 是View 元素上可用的仅限 Android 的样式属性。
见：React Native Docs for the elevation style property
如果您对 3rd 方软件持开放态度，另一种获取 Android 阴影的方法是安装 react-native-shadow。
示例（改编自自述文件）：
import React, Component from "react";
import TouchableHighlight from "react-native";
import BoxShadow from "react-native-shadow";
export default class ShadowButton extends Component
render()
const shadowOpt =
width: 160,
height: 170,
color: "#000",
border: 2,
radius: 3,
opacity: 0.2,
x: 0,
y: 3,
style: marginVertical: 5
;
return (
<BoxShadow setting=shadowOpt>
<TouchableHighlight
style=
position: "relative",
width: 160,
height: 170,
backgroundColor: "#fff",
borderRadius: 3,
// marginVertical: 5,
overflow: "hidden"
>
...
</TouchableHighlight>
</BoxShadow>
);
【讨论】：
添加 css 属性elevation: 1 在 Android 中呈现阴影，无需安装任何 3rd 方库。我用 React Native 0.52 测试了它
使用elevation 时要小心，因为它不会尊重您对shadow 的设置，例如颜色和偏移量。
这个库，不知道child的指定宽高怎么办。 . .因为它需要。
@LeangSocheat 你有没有想过如果你事先不知道宽度或高度怎么办？我有同样的问题。谢谢。
@FuzzyTree 关于 react-native-shadow 模块似乎缺少主要内容。【参考方案2】：
另一个不使用第三方库的解决方案是使用elevation。
从 react-native 文档中提取。 https://facebook.github.io/react-native/docs/view.html
（Android-only）设置视图的高度，使用 Android 的 底层高程 API。这会为项目添加阴影，并且 影响重叠视图的 z 顺序。仅支持 Android 5.0+， 对早期版本没有影响。
elevation 将进入style 属性，可以这样实现。
<View style= elevation: 2 >
children
</View>
海拔越高，阴影越大。希望这会有所帮助！
【讨论】：
为什么高程属性写在两个大括号内？ @divine 外括号用于JS插值，内括号用于对象 这只会在视图的底部做阴影，它不允许你在另一边做阴影 正确，ios 在使用 react-native 时可以更好地处理很多事情，阴影就是其中之一。 请注意elevation——就像它在文档中所说的那样，它“影响重叠视图的 z 顺序”——它基本上就像一个 zIndex 你不能覆盖并且可以导致真正令人困惑的行为。例如，在带有粘性部分标题的 SectionList 中，如果您将 elevation: 3 放在列表中的项目上，它们会突然开始越过标题，将它们隐藏起来（当然仅在 Android 上） .这几乎是不可能调试的！【参考方案3】：
除非为元素指定了backgroundColor，否则Android 上的elevation 样式属性不起作用。
Android - elevation style property does not work without backgroundColor
例子：
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: width: 0, height: 2,
shadowRadius: 10,
elevation: 3,
backgroundColor: 'white'
【讨论】：
这真的需要更多的赞成票，我不知道为什么它不起作用 这就是我要找的。该解决方案适用于 Android 和 iOS，无需安装第三方库。 这是我遗漏的关键点......这需要更多的支持 这就是解决方案！！！背景颜色使它起作用！！！！谢谢^_^ 接受的答案应该是这个。【参考方案4】：你可以试试
//ios
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset:
height: 0,
width: 0
,
//android
elevation: 1
【讨论】：
Elevation 没有为 android 创建足够大或可配置的阴影 - react-native-shadow 似乎是最好的选择【参考方案5】：以下内容将帮助您为每个 Platform 提供所需的样式：
import Text, View, Platform from 'react-native';
......
<View style=styles.viewClass></View>
......
const styles =
viewClass:
justifyContent: 'center',
alignItems: 'center',
height: 60,
...Platform.select(
ios:
shadowColor: '#000',
shadowOffset: width: 0, height: 2 ,
shadowOpacity: 0.2,
,
android:
elevation: 1
,
),
;
【讨论】：
不需要指定平台，因为iOS中的海拔属性将被忽略 @cody 是的，你是对的！但我的示例展示了如何为不同平台设置样式。【参考方案6】：对于安卓屏幕，您可以使用此属性elevation。
例如：
HeaderView:
backgroundColor:'#F8F8F8',
justifyContent:'center',
alignItems:'center',
height:60,
paddingTop:15,
//Its for IOS
shadowColor: '#000',
shadowOffset: width: 0, height: 2 ,
shadowOpacity: 0.2,
// its for android
elevation: 5,
position:'relative',
,
【讨论】：
它可以工作，但在 Android 中，我如何更改阴影颜色？【参考方案7】：只需使用 'elevation' 属性在 android 中获取阴影。像下面的东西
const Header = () =>
// const textStyle, viewStyle = styles;
return (
<View style=styles.viewStyle>
<Text style=styles.textStyle>Albums</Text>
</View>
)
const styles =
viewStyle:
backgroundColor:'#f8f8f8',
justifyContext:'center',
alignItems: 'center',
padding:16,
elevation: 2
【讨论】：
【参考方案8】：我添加了 borderBottomWidth: 0，它在 android 中对我来说效果很好。
【讨论】：
【参考方案9】：你可以使用我的react-native-simple-shadow-view
这可以在 Android 中实现与 iOS 中几乎相同的阴影 无需使用高程，使用与 iOS 相同的阴影参数（shadowColor、shadowOpacity、shadowRadius、偏移等），因此您无需编写特定于平台的阴影样式 可用于半透明视图 在 android 18 及更高版本中受支持【讨论】：
可以用它替换Animated.View吗？ 尝试：const AnimatedShadowView = Animated.createAnimatedComponent(ShadowView)。它应该工作【参考方案10】：另外我想补充一点，如果尝试在子元素具有边框半径的 TouchableHighlight 组件中应用阴影，则父元素 (TouchableHighlight) 也需要设置半径，以便在 Android 上使用高程道具。
【讨论】：
【参考方案11】：我已经为 react-native 实现了 CardView，它支持 android（所有版本）和 iOS。让我知道它是否对您有帮助。 https://github.com/Kishanjvaghela/react-native-cardview
import CardView from 'react-native-cardview'
<CardView
cardElevation=2
cardMaxElevation=2
cornerRadius=5>
<Text>
Elevation 0
</Text>
</CardView>
【讨论】：
【参考方案12】：简而言之，你不能在 android 中这样做，因为如果你只看到关于 shadow 的文档 Support IOS see doc
您可以安装 3rd 方react-native-shadow 的最佳选择
【讨论】：
【参考方案13】：为圆生成阴影，react native，android
根据此处的答案以及我在 github (react-native-shadow) 中找到的文本，我做了一些测试，并认为以下内容可能会对某些人有所帮助。
测试位于圆形按钮上 环境：Windows 10 PC，react-native 使用 react-native-shadow（对圆形效果不好）和 react-native 的高程参数（https://facebook.github.io/react-native/docs/view-style-props#elevation）不同的值，在安卓模拟器上运行(genymotion)这是屏幕的样子：
代码：
import React, Component from 'react';
import View, TouchableHighlight, Text from 'react-native';
import BoxShadow from 'react-native-shadow'
export default class ShadowsTest extends Component
render()
const shadowOpt =
width: 100,
height: 100,
color: "#000",
border: 2,
radius: 50,
opacity: 0.8,
x: 3,
y: 3,
//style: marginVertical: 5
return (
<View style= flex: 1 >
<Header
text="Shadows Test" />
<View style= flexDirection: 'row', justifyContent: 'center' >
<View style= margin: 10, alignItems: 'center',
justifyContent: 'center' >
<TouchableHighlight style=
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 0.8,
borderColor: '#000',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden" >
<Text style= textAlign: 'center' >
0: plain border
</Text>
</TouchableHighlight>
</View>
<View style= margin: 10, alignItems: 'center',
justifyContent: 'center' >
<BoxShadow setting= shadowOpt >
<TouchableHighlight style=
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden" >
<Text style= textAlign: 'center' >
1: RN shadow package
</Text>
</TouchableHighlight>
</BoxShadow>
</View>
</View>
<View style= flexDirection: 'row', justifyContent: 'center' >
<View style= margin: 10, alignItems: 'center',
justifyContent: 'center' >
<TouchableHighlight style=
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
shadowOffset: width: 15, height: 15 ,
shadowColor: "black",
shadowOpacity: 0.9,
shadowRadius: 10,
>
<Text style= textAlign: 'center' >
2: vanilla RN: shadow (may work on iOS)
</Text>
</TouchableHighlight>
</View>
<View style= margin: 10, alignItems: 'center',
justifyContent: 'center' >
<TouchableHighlight style=
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 15,
>
<Text style= textAlign: 'center' >
3: vanilla RN: elevation only (15)
</Text>
</TouchableHighlight>
</View>
</View>
<View style= flexDirection: 'row', justifyContent: 'center', marginBottom: 30 >
<View style= margin: 10, alignItems: 'center',
justifyContent: 'center' >
<TouchableHighlight style=
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 5,
>
<Text style= textAlign: 'center' >
4: vanilla RN: elevation only (5)
</Text>
</TouchableHighlight>
</View>
<View style= margin: 10, alignItems: 'center',
justifyContent: 'center' >
<TouchableHighlight style=
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 50,
>
<Text style= textAlign: 'center' >
5: vanilla RN: elevation only (50)
</Text>
</TouchableHighlight>
</View>
</View>
</View>
)
【讨论】：
【参考方案14】：由于某种原因，它只适用于我添加borderColor: 'transparent'（或任何其他颜色）。我的样式输出如下所示：
borderColor: "transparent", // Required to show shadows on Android for some reason !?!?
shadowColor: '#000',
shadowOffset:
width: 0,
height: 0,
,
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 15,
【讨论】：
【参考方案15】：elevation 在 Expo v30 && React-native v0.55.4 中仍然没有工作。 我在这里尝试了所有答案。
另外，不要尝试 react-native-shadow - 他们的阴影渲染很糟糕。 所以，我正在继续研究。
【讨论】：
谢谢。我想知道为什么海拔对世博会不起作用。我的是 SDK 32 :)【参考方案16】：设置elevation: 3，您应该会在没有第 3 方库的情况下看到组件底部的阴影。至少在 RN 0.57.4
【讨论】：
【参考方案17】：我遇到了同样的问题阴影/海拔没有显示在 Android 上，海拔：2。然后我注意到视图元素是傻瓜宽度，所以我在视图元素中添加了 margin:2 并正确显示了高度。
风格：
margin: 2,
shadowColor: '#000',
shadowOffset:
width: 0,
height: 1
,
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2
安卓：
iOS：
【讨论】：
以上是关于如何在 React Native for android 中设置阴影？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React Native for android 中设置阴影？
如何在 react-native for android 中更改应用程序图标背景颜色