无法在React Native Android中设置ShadowColor

Question

环境

• 环境:

  • 操作系统: macOS High Sierra 10.13.1
  • Node: 8.9.1
  • Yarn: 0.17.10
  • npm: 5.6.0
  • Watchman: 4.7.0
  • Xcode: Xcode 9.2 Build version 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 中实现这样的阴影效果？

因为 react-native 的 shadow Props 只支持 iOS，所以无法直接使用。

• 需要更改颜色
• 尝试了 elevation，但无法更改默认的灰色颜色
• 虽然可以使用 shadowColor props 在 iOS 上实现此功能，但在 Android 上则无法实现，因为它仅支持 iOS。

实际行为

请参见示例代码和预览。

• 它也应该适用于 Android。
• 阴影颜色始终为灰色，尽管我尝试更改...

可重现演示

这是一个示例快照，在其中我只能获得带有默认灰色背景的海拔阴影。

- Bhavan Patel

---

请阅读在什么情况下我可以在我的问题中添加“紧急”或其他类似短语，以便获得更快的答案？ - 总结是这不是一个理想的方式来处理志愿者，并且可能会适得其反，导致无法获得答案。请不要在您的问题中添加此内容。 - halfer

Answer 1

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

elevation :value

针对 Android 版本大于 5 的设备

或者使用

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

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

由于Android的样式列表中没有“shadow”属性，如果我们想在组件上添加阴影效果，我们必须打补丁来使用PNG-24图片，但这样做非常不优雅；因此，这里出现了一个SVG阴影插件来解决这个问题。我们建议在iOS上使用本机阴影。

- Hargun Singh

---

我知道这个答案不是解决问题的最佳方案，但@Bhavan Patel需要紧急帮助，所以我分享了我在这个主题上能够研究到的信息。我欢迎任何改进这个答案的建议。谢谢。 - Hargun Singh

Answer 2

您可以使用LinearGradient技巧

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

更新：

现在，您可以在react native 0.64中添加阴影颜色。

- TheEhsanSarshar

Answer 3

尝试

{
   backgroundColor:"#fff",
   elevation:4,
   shadowColor:"blue",
}

虽然这并不完全符合预期的行为，但目前而言，没有使用任何外部包是最好的选择。

- Musaib

Answer 4

您可以使用react-native-shadow-2库，轻松添加不同颜色的阴影，甚至是渐变阴影。

<Shadow distance={4} startColor='rgba(42, 255, 42, 0.4)' finalColor='rgba(42, 255, 42, 0.05)' >
  <View style={{width:200,height:80}}>
    <Text>TEST!</Text>
  </View>
</Shadow>

- Kasun Thilina

Answer 5

现在我们可以在 Android API 28 及以上版本上设置 shadowColor，但是您还必须将 elevation 设置为大于 0，并且必须将 backgroundColor 设置为其他颜色而不是 transparent。

以下是我正在使用的示例：

headerShadow: {
      shadowColor: colorSet.primaryForeground, 
      elevation: 10, // elevation must be set
      backgroundColor : 'rgba(0,0,0, 0.1)' // background color must be set
    },

- Pyper

Answer 6

使用高程属性在RN Android上实现阴影效果。添加高程属性 #27

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

- i18n

---

他询问了关于 shadowColor 的内容。 - Germa Vinsmoke