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

Question

环境

• 环境：

  • OS：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

• 包裹:(已安装）

  • react：16.0.0
  • react-native：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中实现这样的影子

as shadow仅作为反射原生的道具在iOS中支持

• 颜色需要更改
• 尝试elevation，但无法更改默认灰色颜色
• 能够在ios中使用shadowColor道具而不是在android中实现，因为它只支持iOS

实际行为

查看示例代码和预览。

• 它也应该适用于Android。
• 阴影颜色总是灰色，但我试图改变..

可重复演示

这是一个示例快照，我只能使用灰色[默认]来获得高程阴影。

Answer 1

截至目前，添加阴影的唯一方法是使用

elevation :value

for Android version＆gt; 5

或使用

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

这是第三方插件，但它支持颜色，虽然它到目前为止还不支持RGB

  

因为没有＆＃34;影子＆＃34;在Android的样式列表中属性，如果我们想在组件上添加阴影效果，我们必须修补PNG-24图片，但它非常优雅;因此，这里有一个SVG影子插件来帮助解决这个问题。我们建议您在iOS上使用原生阴影

Answer 2

**

  

您可以使用LinearGradient技巧

**

https://hashnode.com/post/is-there-any-good-alternative-to-elevations-for-android-in-react-native-cjc600tva00pfuzwup50xv01z

Answer 3

使用高程在RN Android上实现阴影。 Added elevation prop #27

<View elevation={5}> </View>