React Native中Android端react-native-skeleton-placeholder背景变黑问题

使用react-native-skeleton-placeholder实现骨架加载动画时，iOS端显示正常，但Android端骨架背景呈现黑色，相关代码如下：

import SkeletonPlaceholder from "react-native-skeleton-placeholder";

<SkeletonPlaceholder
    backgroundColor="#e0e0e0"
    highlightColor="#f5f5f5"
>
    <SkeletonPlaceholder.Item
        flexDirection="column"
        alignItems="flex-start"
    >
        <SkeletonPlaceholder.Item
            width={300}
            height={20}
            borderRadius={4}
            marginBottom={10}
        />
        <SkeletonPlaceholder.Item
            width={370}
            height={180}
            borderRadius={8}
            marginTop={10}
        />
        <SkeletonPlaceholder.Item
            width={370}
            height={180}
            borderRadius={8}
            marginTop={10}
        />
        <SkeletonPlaceholder.Item
            width={370}
            height={180}
            borderRadius={8}
            marginTop={10}
        />
    </SkeletonPlaceholder.Item>
</SkeletonPlaceholder>

解决办法 #

• 显式设置外层容器背景色
  Android端可能因父组件背景未指定，导致骨架透明区域显示系统默认黑色。给SkeletonPlaceholder外层包裹一个View并设置浅色背景：

  <View style={{ backgroundColor: '#ffffff', flex: 1, padding: 16 }}>
    <SkeletonPlaceholder
        backgroundColor="#e0e0e0"
        highlightColor="#f5f5f5"
    >
        {/* 原有骨架内容 */}
    </SkeletonPlaceholder>
  </View>
  

• 调整Android应用主题配置
  检查Android项目的主题设置，确保窗口背景为浅色。修改android/app/src/main/res/values/styles.xml中的AppTheme：

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowBackground">@android:color/white</item>
  </style>
  

  若应用支持深色模式，需同步调整骨架的backgroundColor和highlightColor适配深色背景。

• 升级库版本
  旧版本的react-native-skeleton-placeholder可能存在Android端兼容性问题，执行命令升级到最新版本：

  npm install react-native-skeleton-placeholder@latest
  # 或使用yarn
  yarn add react-native-skeleton-placeholder@latest
  

• 关闭硬件加速（可选）
  部分设备上硬件加速可能导致动画渲染异常，给SkeletonPlaceholder添加androidLayerType属性关闭硬件加速：

  <SkeletonPlaceholder
      backgroundColor="#e0e0e0"
      highlightColor="#f5f5f5"
      style={{ androidLayerType: 'software' }}
  >
      {/* 原有骨架内容 */}
  </SkeletonPlaceholder>
  

内容的提问来源于stack exchange，提问作者Irfan febriyanto