用于 android 的 React-native 阴影道具答案

【问题标题】：React-native shadow props for android用于 android 的 React-native 阴影道具
【发布时间】：2018-09-25 14:24:22
【问题描述】：

有没有办法像在 web 中一样在 react native 中渲染阴影，大多数时候使用高程并不适合所有需求，并且阴影道具仅适用于 IOS，是否有任何 react native 内置方法来处理 android 中的阴影道具，如果没有，请建议阴影道具的轻量级包装必须易于使用。谢谢

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

react-native 中的阴影属性仅适用于 iOS。对于 Android，您应该在视图样式中设置海拔属性。

【讨论】：

【解决方案2】：

你可以使用我的 react-native-simple-shadow-view

这可以在 Android 中实现与 iOS 中几乎相同的阴影
无需使用高程，使用与 iOS 相同的阴影参数（shadowColor、shadowOpacity、shadowRadius、偏移等），因此您无需编写特定于平台的阴影样式
可用于半透明视图
在 android 18 及更高版本中受支持

【讨论】：

【解决方案3】：

可以使用这段代码在android中制作阴影：

const styles = StyleSheet.create({
  myShadow: {
    backgroundColor: "red",
    //flex: 1,
    height:50,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOpacity: 0.8,
    shadowRadius: 4,
    elevation: 4,
  },
});

在渲染中你可以这样使用：

render() {
<View style={styles.myShadow}/>
}

【讨论】：

据我所知，这对于 ios 来说是完美的，但不会为 android 带来任何改变
@AmmarTariq：答案中存在的海拔高度适用于 android。
你是高程是为 android 设计的，我的问题是高程自动生成阴影有没有办法在 android 上操作它？

【解决方案4】：

对于 android，elevation 属性不能很好地工作，我推荐这个库，该样式与 ios 上的样式相同： react-native-shadow-view

【讨论】：

【解决方案5】：

在 Android 和 Ios 两个应用程序中在 react native 中提供阴影的最佳方式

shadowColor: "#000",
shadowOffset: {
	width: 0,
	height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

elevation: 5,

链接：https://ethercreative.github.io/react-native-shadow-generator/

【讨论】：

【解决方案6】：

您可以通过 styled-components 和 shadow* 道具来处理它。例如在样式视图中：

    shadow-opacity: 0.05;
    shadow-radius: 6px;
    shadow-color: black;
    shadow-offset: 2px 2px;

【讨论】：