blocks|key|2856188|text|遗憾的是，RN在默认情况下不支持它，请检查blow链接https://ethercreative.github.io/react-native-shadow-generator/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2856189|但是你可以使用像this这样的npm包|2856190|entityMap|0|LINK|mutability|MUTABLE|url|https://ethercreative.github.io/react-native-shadow-generator/|1|https://www.npmjs.com/package/react-native-shadow^0|R|1Q|0|0|8|4|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Unfortunately RN don't support it by default, check blow link
 <a href="https://ethercreative.github.io/react-native-shadow-generator/" rel="nofollow noreferrer">https://ethercreative.github.io/react-native-shadow-generator/</a>

but you can use npm packages like <a href="https://www.npmjs.com/package/react-native-shadow" rel="nofollow noreferrer">this</a>

blocks|key|5173687|text|您可以使用overflow:+'hidden'来获得所需的结果，而无需安装库。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5173688|将视图包装在父视图中，并将父视图的溢出设置为隐藏，并仅在希望阴影出现的一侧应用填充，如下所示：|5173689|++<View+style={{+overflow:+'hidden',+paddingBottom:+5+}}>
++++<View
++++++style={{
++++++++backgroundColor:+'#fff',
++++++++width:+300,
++++++++height:+60,
++++++++shadowColor:+'#000',
++++++++shadowOffset:+{+width:+1,+height:+1+},
++++++++shadowOpacity:++0.4,
++++++++shadowRadius:+3,
++++++++elevation:+5,
++++++}}+
++++/>
++</View>|code-block|syntax|javascript|5173690|结果：|5173691|📷|atomic|5173692|​|5173693|下面是一个您可以使用的自定义组件：|5173694|import+React+from+'react'
import+{+View,+StyleSheet,+ViewPropTypes+}+from+'react-native'
import+PropTypes+from+'prop-types'


const+SingleSidedShadowBox+=+({+children,+style+})+=>+(
++<View+style={[+styles.container,+style+]}>
++++{+children+}
++</View>
);

const+styles+=+StyleSheet.create({
++container:{
++++overflow:+'hidden',
++++paddingBottom:+5,
++}
});

SingleSidedShadowBox.propTypes+=+{
++children:+PropTypes.element,
++style:+ViewPropTypes.style,
};

export+default+SingleSidedShadowBox;|5173695|示例：|5173696|<SingleSidedShadowBox+style={{width:+'90%25',+height:+40}}>
++<View+style={{
++++backgroundColor:+'#fff',
++++width:+'100%25',
++++height:+'100%25',
++++shadowColor:+'#000',
++++shadowOffset:+{+width:+1,+height:+1+},
++++shadowOpacity:++0.4,
++++shadowRadius:+3,
++++elevation:+5,
++}}+/>
</SingleSidedShadowBox>|5173697|您可以根据您的阴影调整填充|5173698|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/525733c947892fc6cce3a49492463f01.png|imageAlt^0|5|I|0|0|0|0|0|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1H|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|R|3|S|5|6|7|1M|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1N|8|@]|D|@]|E|$]]|$1|V|3|W|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|X|3|Y|5|6|7|1P|8|@]|D|@]|E|$]]|$1|Z|3|10|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|11|3|12|5|6|7|1R|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|14|$15|$5|16|17|18|E|$19|1A|1B|-4]]]]

You can use <code>overflow: 'hidden'</code> to achieve the desired result without having to install a library. 
wrap the view in a parent view and set the parent's overflow to hidden and apply a padding only on the side where you want your shadow to appear like so: 

<pre><code> &lt;View style={{ overflow: 'hidden', paddingBottom: 5 }}&gt;
 &lt;View
 style={{
 backgroundColor: '#fff',
 width: 300,
 height: 60,
 shadowColor: '#000',
 shadowOffset: { width: 1, height: 1 },
 shadowOpacity: 0.4,
 shadowRadius: 3,
 elevation: 5,
 }} 
 /&gt;
 &lt;/View&gt;
</code></pre>

result: <a href="https://i.stack.imgur.com/b3mEO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/b3mEO.png" alt="result"></a>

here's a custom component that you can use: 

<pre><code>import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowBox = ({ children, style }) =&gt; (
 &lt;View style={[ styles.container, style ]}&gt;
 { children }
 &lt;/View&gt;
);

const styles = StyleSheet.create({
 container:{
 overflow: 'hidden',
 paddingBottom: 5,
 }
});

SingleSidedShadowBox.propTypes = {
 children: PropTypes.element,
 style: ViewPropTypes.style,
};

export default SingleSidedShadowBox;
</code></pre>

example: 

<pre><code>&lt;SingleSidedShadowBox style={{width: '90%', height: 40}}&gt;
 &lt;View style={{
 backgroundColor: '#fff',
 width: '100%',
 height: '100%',
 shadowColor: '#000',
 shadowOffset: { width: 1, height: 1 },
 shadowOpacity: 0.4,
 shadowRadius: 3,
 elevation: 5,
 }} /&gt;
&lt;/SingleSidedShadowBox&gt;
</code></pre>

you can adjust the padding depending on your shadow

blocks|key|595781|text|上面的答案非常有帮助，但对我来说效果最好的变通方法是将这两个组件都包装起来，1-放置阴影的组件，2-将阴影放置在上的组件，使用样式规则overflow:+"hidden"|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|595782|示例：|595783|function+SomeScreen+(){
++return+(
++++<View+style={{overflow:+"hidden"}}/*Top+shadow+is+hidden*/>
++++++<NavBar+style={styles.shadow}/*The+component+dropping+a+shadow*/+/>+
++++++<ProductList+/*The+component+under+the+shadow*/+/>
++++</View>
++);
}

const+styles+=+StyleSheet.create({
++shadow:+{
++++shadowColor:+"black",
++++shadowOffset:+{+width:+0,+height:+4+},
++++shadowRadius:+6,
++++shadowOpacity:+0.2,
++++elevation:+3,
++}
});|code-block|syntax|javascript|595784|entityMap^0|12|6|1C|8|1V|I|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|W|8|@$9|X|A|Y|B|C]]|E|@]|F|$]]|$1|I|3|J|5|K|7|Z|8|@]|E|@]|F|$L|M]]|$1|N|3|-4|5|6|7|10|8|@]|E|@]|F|$]]]|O|$]]

Answers above are quite helpful but the workaround that worked best for me is by wrapping both, 1-The component dropping the shadow and 2-The component the shadow is being dropped on in a component with the style rule <code>overflow: &quot;hidden&quot;</code>
Example:
<pre><code>function SomeScreen (){
 return (
 &lt;View style={{overflow: &quot;hidden&quot;}}/*Top shadow is hidden*/&gt;
 &lt;NavBar style={styles.shadow}/*The component dropping a shadow*/ /&gt; 
 &lt;ProductList /*The component under the shadow*/ /&gt;
 &lt;/View&gt;
 );
}

const styles = StyleSheet.create({
 shadow: {
 shadowColor: &quot;black&quot;,
 shadowOffset: { width: 0, height: 4 },
 shadowRadius: 6,
 shadowOpacity: 0.2,
 elevation: 3,
 }
});
</code></pre>

I'm trying to add a shadow on the bottom of a view, but I don't how to do it on Android. With <code>elevation</code> it put a shadow also on the top. Is there a way to do it like on iOS?
Here's my code:
<pre><code>export function makeElevation(elevation) {
const iosShadowElevation = {
 shadowOpacity: 0.0015 * elevation + 0.18,
 shadowRadius: 0.5 * elevation,
 shadowOffset: {
 height: 0.6 * elevation,
 },
};
const androidShadowElevation = {
 elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;
</code></pre>
}
left: iOS (expected)
right: Android
EDIT: The only &quot;fake&quot; solution I found is to use <code>react-native-linear-gradient</code> instead to create a custom shadow.
<a href="https://i.stack.imgur.com/XAlYR.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/XAlYR.jpg" alt="IOS/ANDROID" /></a>

How can I set elevation shadow only on the bottom on react native?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图在视图的底部添加阴影，但我不知道如何在Android上做到这一点。对于elevation，它也在顶部放置了一个阴影。有没有办法像在iOS上那样做呢？下面是我的代码：export function makeElevation(elevation) {const iosShadowElevation = {    s...

问如何在react native上仅在底部设置仰角阴影？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react native上仅在底部设置仰角阴影？EN