在Android中,通过添加CSS属性elevation: 1
,可以呈现阴影效果,而不需要安装任何第三方库。
elevation
是仅适用于View
元素的Android样式属性。
参见:React Native 文档中有关elevation
样式属性的说明
如果您可以接受第三方软件,则可以通过安装react-native-shadow
来获得Android的阴影效果。
示例(改编自自述文件):
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>
);
}
}
在Android上,elevation
样式属性不起作用,除非已为元素指定了backgroundColor
。
Android - elevation样式属性需要指定backgroundColor才能生效
示例:
{
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2},
shadowRadius: 10,
elevation: 3,
backgroundColor: 'white'
}
另一种不使用第三方库的解决方案是使用elevation
。
摘自React Native文档。 https://facebook.github.io/react-native/docs/view.html
(仅适用于Android) 使用Android底层的高程API设置视图的高程。这将为项目添加一个投影,并影响重叠视图的Z顺序。仅支持Android 5.0+,在早期版本上没有任何效果。
elevation
将进入style
属性中,可以像下面这样实现。
<View style={{ elevation: 2 }}>
{children}
</View>
海拔越高,阴影就越大。希望这可以帮到你!
您可以尝试
//ios
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
height: 0,
width: 0
},
//android
elevation: 1
平台
进行所需的样式设置: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
},
}),
}
};
对于Android屏幕,您可以使用此属性: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',
},
您可以使用我的react-native-simple-shadow-view
我在Android上添加了borderBottomWidth: 0,它能很好地工作。
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
}
}
elevation:1
可以在Android上渲染阴影。我已经在React Native 0.52中进行了测试。 - Guy