javascript - 升级到 0.56 后的 React-Native Shadow

Question

我已经升级了 react-native 依赖项，并且我的视图的 shadow 属性存在一些奇怪的问题。它为 View 中的每个孩子设置阴影，而不是在它应该在的实际视图上。它只发生在 iOS 上，android 继续工作。

我增加了 shadowOpacity 以了解实际发生的情况，并且如上所述，每个项目都有一个阴影，但不是主容器。

  render() {
    return (
      <View style={styles.taskContainer}>
        <TouchableOpacity onPress={this.props.onPress}>
          <View style={styles.taskContentContainer}>
            <Text style={styles.title}>{this.props.task.title}</Text>
            <View row spread style={{ marginTop: 5 }}>
              {this.state.profileImgUrl ? (
                <FastImage 
              ...


  taskContainer: {
    marginLeft: 10,
    marginRight: 10,
    marginTop: 11,
    //ios
    shadowOpacity: 0.15,
    shadowRadius: 4,
    shadowOffset: {
      height: 1,
      width: 0
    },
    //android
    elevation: 2.5,
    borderRadius: 5,
    borderWidth: 0,
    marginBottom: 2
  },

标签： javascriptreactjsreact-native

Answer 1

在尝试提高 Android 性能时，我已经阅读了有关过度绘制的信息，因此我试图通过不对子视图应用任何不必要的背景颜色来减少它。因为父视图已经设置了背景颜色，所以我通过该方法减少了过度绘制。现在问题似乎是新的更新处理带有阴影的视图并且没有（或透明的）背景颜色下降到它们的子视图。

解决方案：

添加"backgroundColor: "white"到 taskContainer 样式。