无法在react-native android中设置`ShadowColor`

Question

环境

• 环境：

  • 操作系统：macOS High Sierra 10.13.1
  • 节点：8.9.1
  • 纱：0.17.10
  • npm：5.6.0
  • 守望者：4.7.0
  • Xcode：Xcode 9.2 Build版本9C40b
  • Android Studio：2.3 AI-162.4069837

• 软件包：（已安装）

  • 反应：16.0.0
  • 反应本机：0.51.0

重现步骤

运行此代码

import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
class App extends Component {
  render() {
    return (<View style={styles.container}>
      <View>
        <TouchableOpacity style={[styles.boxShadow, shadow]}>
          <Text style={styles.text}>LOGIN</Text>
        </TouchableOpacity>
      </View>
    </View>);
  }
}
const shadow = {
  shadowColor: '#30C1DD',
  shadowRadius: 10,
  shadowOpacity: 0.6,
  elevation: 8,
  shadowOffset: {
    width: 0,
    height: 4
  }
}
const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxShadow: {
    width: 200,
    height: 50,
    borderRadius: 10,
    backgroundColor: '#ed7171',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#ffffff'
  }
};
export default App;

预期行为

有没有办法在Android中实现这样的影子

作为react-native的影子道具仅在iOS中支持

• 颜色需要改变
• 试过elevation，但不能更改默认的灰色背景颜色
• 能够通过shadowColor道具在ios中实现，但不能在android中实现，因为它仅支持iOS

实际行为

请参阅示例代码和预览。

• 它也应该适用于android。
• 阴影颜色始终为灰色，但是我尝试更改。

可复制的演示

这是示例快照，在该快照中，我只能获得带有灰度的阴影，只有灰色[默认]。

Answer 1

到目前为止，添加阴影的唯一方法是使用

elevation :value

适用于 Android 版本 >5

或使用

https://github.com/879479119/react-native-shadow

这是一个第三方插件，但它支持颜色，尽管目前还不支持 RGB

由于Android的样式列表中没有“shadow”属性，所以如果我们想给组件添加阴影效果，就必须对PNG-24图片进行补丁，但这样很不美观；因此这里有一个 SVG 阴影插件来帮助解决这个问题。我们建议您在 iOS 上使用原生阴影