为什么反应原生中的阴影被应用于文本？答案

【问题标题】：Why is shadow in react native being applied to text?为什么反应原生中的阴影被应用于文本？
【发布时间】：2020-06-09 16:32:59
【问题描述】：

我有以下组件：

<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',
    }

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

【问题讨论】：

在这种情况下，将文本包装到 View 中并赋予其阴影样式。
您可以添加您的styles.eventTextContainer 和styles.eventText 代码吗？
@Yasuooooooooo 刚刚做了

标签： react-native shadow

【解决方案1】：

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

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

【讨论】：