React Native Box Shadow 中的 Tailwind Css答案

【问题标题】：Tailwind Css in React Native Box ShadowReact Native Box Shadow 中的 Tailwind Css
【发布时间】：2022-10-08 15:28:59
【问题描述】：

我是新来的反应本地人。我正在尝试对我创建的餐厅组件应用阴影效果。不幸的是，我无法让阴影生效。所有其他造型作品。我在这个项目中使用了顺风 css。顺风配置没问题。唯一的问题是到目前为止的阴影。我尝试将阴影应用于其他组件，但结果相同，没有观察到任何效果。我哪里错了或者我没有看到什么。

<TouchableOpacity className="bg-white mr-3 shadow">
  <Image 
    source={{
      uri: imgUrl,
    }}
    className="h-36 w-36 rounded-sm"
  />
  <View>
    <Text className="font-bold text-lg pt-2">{title}</Text>
    <View className="flex-row items-center space-x-1">
      <StarIcon color="green" opacity={0.5} size={22} />
      <Text className="text-xs text-gray-500">
        <Text className="text-green-500">{rating}</Text> : {genre}
      </Text>
    </View>
    <View className="flex-row items-center space-x-1">
      <LocationMarkerIcon color="gray" size={22} opacity={0.4}/>
      <Text className="text-xs text-gray-500"> Nearby : {address}</Text>
    </View>
  </View>
</TouchableOpacity>

【问题讨论】：

标签： javascript react-native tailwind-css

【解决方案1】：

首先，您的具有阴影的视图必须具有背景颜色，甚至是白色，并且您的样式是这样的： style={{backgroundColor:'#fff', shadowColor:'#000', shadowOffset:{width:0, height:3}, shadowOpacity:0.5, elevation:3}}

【讨论】：

在使用 tailwind css 时，backgroundColor 不是必须的，它是一个附加选项。

【解决方案2】：

Shadow 不适用于 tailwind css 上的 android 设备。我使用的解决方法是将样式属性设置为 elevation:2 ，数字越大阴影越暗。 <TouchableOpacity className="mr-3 bg-white" style={{ elevation:2 }}> [在此处输入链接描述][1]

[1]：How to set shadows in React Native for android? 这个问题在这里得到了很好的解决。

【讨论】：

【解决方案3】：

而不是阴影，你可以简单地替换t.shadow, t.shadowMd, t.shadowLg, t.shadow2xl

对于 react-native-tailwindcss，tailwindCSS 类有些不同

还是一头雾水，请参考here

【讨论】：

【解决方案4】：

React Native 中的 TailwindCSS 是：nativewindShadow 不适用于 nativewind 上的 android 设备。您应该使用外部样式而不是 nativewind 阴影属性，例如：

从“react-native”导入 { StyleSheet }

const styles = StyleSheet.create({
    shadow: {
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 3,
        },
        shadowOpacity: 0.27,
        shadowRadius: 4.65,

        elevation: 6,
    }
})
export default styles

用法：<View className="...." style={styles.shadow} />

【讨论】：