react native ios&android 阴影样式
在React Native中,创建iOS和Android平台的阴影样式可以通过以下方法实现:
- 使用
elevation
属性(仅限Android)。 - 使用
shadowColor
,shadowOpacity
,shadowOffset
和shadowRadius
属性(同时适用于iOS和Android)。
以下是一个简单的React Native组件,它创建了一个带有阴影的视图:
import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
const ShadowView = () => {
return (
<View style={styles.shadowContainer}>
<View style={styles.content}>
这里是内容
</View>
</View>
);
};
const styles = StyleSheet.create({
shadowContainer: {
...Platform.select({
ios: {
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
},
android: {
elevation: 5,
},
}),
},
content: {
backgroundColor: 'white',
padding: 10,
},
});
export default ShadowView;
在这个例子中,shadowContainer
样式根据平台定义了阴影。iOS使用shadowColor
, shadowOffset
, shadowOpacity
, 和 shadowRadius
属性,而Android使用elevation
。content
样式定义了视图的背景颜色和内边距。
评论已关闭