ios - 将 Native 阴影反应到顶部以提供类似“架子”的效果
问题描述
我正在尝试使用 react native shadow 重新创建下面的图像。如您所见,有了阴影,图像对象似乎位于白色架子的顶部。
这是我的尝试。但我的努力不够短,因为顶部阴影更像是黑点,而不是像上面的渐变。有什么建议吗?谢谢!
const CollectionScreen = () => {
return (
<View>
<View style={{ backgroundColor: 'black', width: 100, height: 100, position: 'absolute', top: 100, left: 100}}/>
<View style = {styles.shelf}/>
</View>
);
}
const styles = StyleSheet.create({
shelf: {
width: 1242,
height: 25,
borderRadius: 5,
backgroundColor: 'white',
position: 'absolute',
top: 200,
shadowColor: "#000",
shadowOffset: {
width: 3,
height: -5,
},
shadowOpacity: 0.25,
shadowRadius: 10,
marginTop: 3
}
})
解决方案
这是我的尝试。我添加了一个浅灰色框来表示架子的顶部,以及在底部的“书”下添加了一条带有阴影的线,以复制仅落在架子上的阴影。
export default function App() {
return (
<View>
<View style={styles.shelf} />
<View style={styles.shelfTop} />
<View
style={{
backgroundColor: 'black',
width: 100,
height: 5,
position: 'absolute',
top: 190,
left: 100,
shadowColor: '#000',
shadowOffset: {
width: 3,
height: 5,
},
shadowOpacity: 0.50,
shadowRadius: 5,
}}
/>
<View
style={{
backgroundColor: 'black',
width: 100,
height: 100,
position: 'absolute',
top: 95,
left: 100,
}}
/>
</View>
);
}
const styles = StyleSheet.create({
shelfTop: {
width: 1242,
height: 25,
position: 'absolute',
top: 180,
backgroundColor: '#F5F5F5',
},
shelf: {
width: 1242,
height: 25,
borderRadius: 5,
backgroundColor: 'white',
position: 'absolute',
top: 200,
shadowColor: '#000',
shadowOffset: {
width: 3,
height: 5,
},
shadowOpacity: 0.25,
shadowRadius: 20,
marginTop: 3,
},
});
推荐阅读
- javascript - 我可以从 Firestore 中以对象形式在 React 中检索数据及其嵌套数据吗?
- javascript - 使用 wget 镜像整个站点。webpack nad js问题
- javascript - 如何使用查询选择器选择另一个特定 div 内的特定元素?
- python - 条形图上方的图表js空间
- python - 如何使用 python 文件发布颤振应用程序
- python - 在 Colab 中使用 Sementation 模型导入 UNet 时出错
- php - Google sheet API - PHP - 创建工作表
- puppeteer - 从一系列网址中抓取 - puppeteer
- label - 用于 GeoJSON 标记的 Cesium 问题定位标签
- sql - FROM 更改检索数据后添加未使用的表