代码之家 › 专栏 › 技术社区 › four-eyes

视图有阴影集,但无法有效计算阴影。如何解决此问题

react-native ios javascript

0

four-eyes · 技术社区 · 3 年前

我在iOS上收到此警告。

看法类型为RCTView的具有阴影集,但无法有效计算阴影。请考虑设置背景色来解决此问题,或者将阴影应用于更特定的组件。

可以追踪到这里 https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06 。

我不明白是什么引起了警告。以下是应用于 <View /> 这就是问题的根源。

const styles = StyleSheet.create({
  borderColor: '#EDAE49',
  borderWidth: 2,
  borderRadius: 7,
  backgroundColor: '#EDAE49',
  padding: 7,
  marginBottom: 5,
  width: '100%',
  shadowColor: '#000',
  shadowOffset: {width: 0, height: 2},
  shadowOpacity: 0.5,
  shadowRadius: 2,
  elevation: 2,
});

是什么导致这里效率低下?有 backgroundColor 集,中没有透明度 背景色 。

0 回复 | 直到 3 年前

1

Shakil 3 年前

根据我的理解,如果你把阴影放在没有可见属性(例如背景色)的包装组件上,就会发生这种情况,阴影会根据子组件进行计算,从而降低效率。解决方案是简单地将阴影移动到一个新的样式属性,然后将其传递给子对象。

<View style={styles.containerWithShadow}>
    <Icon name="arrow-down-bold" />
</View>

如果 View 样式没有背景色。阴影将根据 Icon 。

作为解决方案,您可以 看法 如果不会影响您的整体设计,则设置实心背景的样式,或者您可以从 看法 样式,并为创建另一个带有阴影的样式 偶像 :

<View style={styles.container}>
    <Icon name="arrow-down-bold" style={styles.iconWithShadow} />
</View>