React Native:如何将阴影和边框半径应用于视图? [英] React Native: how to apply shadow and borderRadius to a View?

问题描述

有没有办法将 shadow 和 borderRadius 应用到 View 组件，并且阴影在圆角之后?

目前您必须设置 overflow: 'hidden' 才能使 borderRadius 工作，但这样做会消除阴影.

这显然是 React Native 中的一个古老的已知问题，可能不是将在不久的将来修复.本期提出了一种解决方法，将两个View叠加，但没有给出代码示例.

任何人都可以给出这个建议解决方案的代码示例吗?它会跟随圆角吗(我怀疑)?

是否有一个包包含一些 本机绑定伏都教把戏 ?

还有其他解决方案吗?

我已经尝试过这个问题的解决方案 但它对视图不起作用，borderRadius 道具不起作用并触发警告，建议将其嵌套在 style 道具中.

解决方案

你可以使用 此工具 用于为 android 和 iOS 生成阴影参数.

诀窍是制作两个视图，一个用于具有透明背景的阴影，另一个用于内容本身，它们都具有相同的borderRadius，因此基本卡片将如下所示:

从'react'导入React；从'react-native'导入{视图、样式表、文本}；导出默认值 () =>{返回 (<视图样式={styles.cardShadow}><视图样式={styles.cardContainer><文字>卡片内容</Text></查看></查看>)}const 样式 = StyleSheet.create({卡片阴影:{边界半径:16，背景颜色:'透明'，阴影颜色:'#000'，阴影偏移:{宽度:0，高度:1，},阴影不透明度:0.22，阴影半径:2.22，海拔:3，},卡片容器:{背景颜色:'#fff'，边界半径:16，溢出:'隐藏'，},});

本质上，这就是制作带有阴影和圆角的视图所需要的，您还可以添加一些边距/填充和 flexbox 制作一张漂亮的浮动卡片.

Is there a way to apply a shadow AND a borderRadius to a View component, with the shadow following the rounded corners ?

Currently you have to set overflow: 'hidden' for borderRadius to work, but doing so removes the shadows.

It apparently is an old and known issue in React Native, likely not going to be fixed in the near future. A workaround was proposed in this issue, of superposing two Views but no code sample was given.

Can anybody give a code example of this proposed solution ? Will it follow the rounded corners (I doubt it) ?

Is there a package with some native binding voodoo doing the trick ?

Is there another solution ?

I already tried the solution from this question but it did not work for a View, the borderRadius prop does not work and triggers a warning advising to nest it in a style prop.

解决方案

You can make use of this tool to generate parameters to shadows for both android and iOS.

And the trick is to make two Views, one for shadow with transparent background, other for the Content itself, both of them with the same borderRadius so a basic card will look like this:

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';

export default () => {

return (
 <View style={styles.cardShadow}>
  <View style={styles.cardContainer>
    <Text> Card Content </Text>
  </View>
 </View>
)
}

const styles = StyleSheet.create({
cardShadow: {
 borderRadius: 16,
 backgroundColor: 'transparent',
 shadowColor: '#000',
 shadowOffset: {
   width: 0,
   height: 1,
 },
 shadowOpacity: 0.22,
 shadowRadius: 2.22,
 elevation: 3,
},
cardContainer: {
 backgroundColor: '#fff',
 borderRadius: 16,
 overflow: 'hidden',
},
});

In essence this is what you need to make a View with shadow and rounded corners, you could add also some margin/padding and flexbox to make a nice floating card.

这篇关于React Native:如何将阴影和边框半径应用于视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！