边框阴影React Native

Question

我目前正在开发一个React Native应用，希望在我的边框上使用边框阴影，有什么实现方法吗？我尝试过View组件的阴影属性，但似乎不起作用。

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

谢谢！

- Ayushman Kishore Dash

Answer 1

你需要给 View 组件添加 elevation 属性。

<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
    }
   },
 })

- Saurabh Joshi

---

在 TypeScript 中没有声明 elevation 属性。有什么想法可以解决这个错误吗？实际上，您可以直接将 elevation 放入样式中。 - jlguenego

Answer 2

你可以像下面这样使用高程（elevation）：

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

- jsina

---

仅在Android上使用高程（elevation）有效。对于iOS，您还需要添加以下属性：shadowOpacity：0.8， shadowRadius：2， shadowOffset：{ height: 1， width: 1 } - S.Hashmi

Answer 3

我建议使用这个工具。它会展示出阴影效果并给你可复制的代码。

- ianarko

Answer 4

1. 对于渐变颜色，请使用expo-linear-gradient
2. 要添加阴影，请在View中使用elevation选项。

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

- Bestine

Answer 5

要添加阴影，您可以使用react-native-shadow，而对于渐变效果，可以使用react-native-linear-gradient。

- Mohamed Khalil

---

看起来react-native-shadow-2现在拥有更多功能和更好的维护。 - theFreedomBanana

Answer 6

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

就像这样 -

- Vishal Ghai

---

似乎你漏掉了你想要提供的例子。 - Chris Albert