为什么 React Native 中的阴影应用于文本？

Question

我有以下组件：

<TouchableOpacity style={styles.event} onPress={onPress}>
      <View style={styles.dateContainer}>
        <Text style={styles.eventDate}>Sent at : {event.sentAt}</Text>
      </View>
      <View style={styles.eventTextContainer}>
        <Text style={styles.eventText}>{event.text}</Text>
      </View>
    </TouchableOpacity>

然后在我的风格中：

event: {
        shadowColor: "#000",
        shadowOffset: {
        width: 5,
        height: 5,
        },
        shadowOpacity: 0.75,
        shadowRadius: 3.84,
    ...Platform.select({
      android: {
        elevation: 5,
      },
    }),
eventTextContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
    },
    eventText: {
        fontSize: 20,
        fontWeight: '700',
    }

阴影被应用于文本，这是我不想要的，只想将其应用于可触摸的不透明度，我做错了什么？

Answer 1

这类似于另一个stackoverflow 问题，避免此问题的关键是将背景颜色应用于具有阴影样式的容器，在您的情况下是事件样式。

event: {
  shadowColor: "#000",
  shadowOffset: {
    width: 5,
    height: 5,
  },
  shadowOpacity: 0.75,
  shadowRadius: 3.84,
  ...Platform.select({
    android: {
    elevation: 5,
  },
  backgroundColor: "#FFF",
}),