边框阴影 React Native答案

【问题标题】：Border Shadow React Native边框阴影 React Native
【发布时间】：2017-09-24 11:42:21
【问题描述】：

我目前正在开发一个 React Native 应用程序，并希望在我的边框上添加边框阴影有什么建议如何实施吗？我已经尝试过 View 组件的阴影道具，但它似乎不起作用。

我还想要一些渐变背景色。有什么建议吗？

谢谢！

【问题讨论】：

【解决方案1】：

你必须给 View 提供海拔道具

<View elevation={5} style={styles.container}>
 <Text>Hello World !</Text>
</View>

样式可以这样添加：

const styles = StyleSheet.create({

 container:{
    padding:20,
    backgroundColor:'#d9d9d9',
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 1
    }
   },
 })

【讨论】：

【解决方案2】：

您可以像下面这样简单地使用海拔高度： <View elevation={5}> </View>

【讨论】：

elevation 仅适用于 android。对于 ios，您还需要添加以下属性以及高度：shadowOpacity: 0.8, shadowRadius: 2, shadowOffset: { height: 1, width: 1 }

【解决方案3】：

我建议使用this tool.，它会向您展示阴影的外观，并为您提供可以复制的代码。

【讨论】：

【解决方案4】：

要添加阴影，您可以使用react-native-shadow 和渐变react-native-linear-gradient

【讨论】：

【解决方案5】：

1.渐变色使用expo-linear-gradient
2.要添加阴影，请使用视图中的海拔选项。

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

【讨论】：

【解决方案6】：

您只能在 ios 应用程序中使用内置的阴影道具。对于 android，您可以使用 {elevation:2} 方法在您的组件上体验阴影效果，但您不能像在 ios 中那样自定义阴影（颜色、偏移等）。

像这样 -

【讨论】：

您似乎错过了您打算提供的示例。