ios 视图具有阴影集,但无法在React Native中有效计算阴影

rhfm7lfc  于 2023-03-05  发布在  iOS
关注(0)|答案(1)|浏览(232)

我在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集,backgroundColor中没有透明性。

vsnjm48y

vsnjm48y1#

根据我的理解,如果你把阴影放在一个没有visible属性(例如背景色)的 Package 组件上,阴影会根据子组件计算,从而降低效率。解决方法是简单地把阴影移到一个新的style属性,然后把它传递给子组件。

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

如果View样式没有背景色,这将触发警告。阴影将基于Icon的形状隐式计算。
作为一种解决方案,如果不影响整体设计,则可以为View样式提供纯色背景,或者可以从View样式中移除阴影,然后为Icon创建另一个具有阴影的样式:

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

相关问题