您好我正在尝试为我的工厂设置阴影，但到目前为止我的尝试失败了/p>
这是我尝试过的
<View
style={{
width: 56,
height: 56,
elevation: 2,
borderRadius: 28,
marginBottom: 3,
backgroundColor: 'rgba(231,76,60,1)',
}}
></View>
我需要达到的目标
【问题讨论】：
标签： react-native react-native-android shadow
添加 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>
);
}
}
【讨论】：
elevation: 1 在 Android 中呈现阴影，无需安装任何 3rd 方库。我用 React Native 0.52 测试了它
elevation 时要小心，因为它不会尊重您对shadow 的设置，例如颜色和偏移量。
另一个不使用第三方库的解决方案是使用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>
海拔越高，阴影越大。希望这会有所帮助！
【讨论】：
elevation——就像它在文档中所说的那样，它“影响重叠视图的 z 顺序”——它基本上就像一个 zIndex 你不能覆盖并且可以导致真正令人困惑的行为。例如，在带有粘性部分标题的 SectionList 中，如果您将 elevation: 3 放在列表中的项目上，它们会突然开始越过标题，将它们隐藏起来（当然仅在 Android 上） .这几乎是不可能调试的！
除非为元素指定了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'
}
【讨论】：
你可以试试
//ios
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
height: 0,
width: 0
},
//android
elevation: 1
【讨论】：
以下内容将帮助您为每个 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
},
}),
}
};
【讨论】：
对于安卓屏幕，您可以使用此属性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',
},
【讨论】：
只需使用 '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
}
}
【讨论】：
我添加了 borderBottomWidth: 0，它在 android 中对我来说效果很好。
【讨论】：
你可以使用我的react-native-simple-shadow-view
【讨论】：
另外我想补充一点，如果尝试在子元素具有边框半径的 TouchableHighlight 组件中应用阴影，则父元素 (TouchableHighlight) 也需要设置半径，以便在 Android 上使用高程道具。
【讨论】：
我已经为 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>
【讨论】：
简而言之，你不能在 android 中这样做，因为如果你只看到关于 shadow 的文档 Support IOS see doc
您可以安装 3rd 方react-native-shadow 的最佳选择
【讨论】：
根据此处的答案以及我在 github (react-native-shadow) 中找到的文本，我做了一些测试，并认为以下内容可能会对某些人有所帮助。
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>
)
}
}
【讨论】：
由于某种原因，它只适用于我添加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,
}
【讨论】：
elevation 在 Expo v30 && React-native v0.55.4 中仍然没有工作。 我在这里尝试了所有答案。
另外，不要尝试 react-native-shadow - 他们的阴影渲染很糟糕。 所以，我正在继续研究。
【讨论】：
设置elevation: 3，您应该会在没有第 3 方库的情况下看到组件底部的阴影。至少在 RN 0.57.4
【讨论】：