React Native中Thumbnail图标样式调整：实现白叉黑底效果

针对你遇到的问题，这里有几个实用的方法来实现想要的效果，避开之前尝试时出现的多余边框或色块问题：

方案1：使用Image组件替代Thumbnail，配合tintColor和背景色 #

Thumbnail组件通常自带一些默认样式（比如圆角、固定尺寸），这可能导致你设置背景时出现意外效果。换成基础的Image组件可以更灵活地控制样式：

export const Screen: React.FunctionComponent = () => { 
  return ( 
    <SafeAreaView style={styles.safeAreaViewContainer}> 
      <View style={styles.container}> 
        <View style={styles.iconsContainer}> 
          <TouchableOpacity style={styles.cross}>
            {/* 替换成Image组件 */}
            <Image
              source={{ uri: 'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png' }}
              style={styles.closeIcon}
            />
          </TouchableOpacity> 
        </View> 
      </View> 
    </SafeAreaView> 
  ); 
};

export const styles = StyleSheet.create({ 
  safeAreaViewContainer: { flex: 1 }, 
  container: { backgroundColor: '#323443', flex: 1 }, 
  cross: { 
    paddingTop: moderateScale(30), 
    paddingLeft: moderateScale(20), 
    zIndex: 100, 
  },
  closeIcon: {
    // 设置图标宽高，根据需求调整
    width: moderateScale(24),
    height: moderateScale(24),
    // 黑色背景
    backgroundColor: 'black',
    // 给透明的叉号染色为白色
    tintColor: 'white',
    // 确保图标在背景内显示，不会拉伸变形
    resizeMode: 'contain',
  }
});

关键点说明：

• tintColor会自动给图片中透明以外的区域染色，正好把你的透明叉号变成白色
• resizeMode: 'contain'保证图标完整显示在背景区域内，不会超出或变形
• 直接给Image设置宽高和背景色，能精确控制黑色背景的范围，不会出现多余色块

方案2：用绝对定位的View做精确背景包裹 #

如果还是想保留Thumbnail（或者需要更精细的背景控制），可以用一个绝对定位的View作为黑色背景，放在图标下方：

<TouchableOpacity style={styles.cross}>
  {/* 黑色背景View */}
  <View style={styles.iconBackground} />
  <Thumbnail 
    source={{ uri: 'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png' }}
    style={styles.closeThumbnail}
  />
</TouchableOpacity>

// 样式补充
iconBackground: {
  position: 'absolute',
  width: moderateScale(24),
  height: moderateScale(24),
  backgroundColor: 'black',
  // 确保背景在图标下方
  zIndex: -1,
},
closeThumbnail: {
  width: moderateScale(24),
  height: moderateScale(24),
  tintColor: 'white',
}

关键点说明：

• 绝对定位的View可以完美匹配图标的大小，不会超出范围
• zIndex: -1让背景处于图标下方，不会遮挡叉号
• 同样用tintColor把叉号染成白色

方案3：使用自定义SVG图标（最优解） #

如果可以替换图标资源，把这个PNG转成SVG组件是最灵活的方式——你可以直接修改SVG代码中的颜色，完全避免图片样式的问题：

比如转成SVG组件后，你可以直接设置叉号的fill="white"，背景矩形的fill="black"，这样渲染出来的效果完全符合需求，而且是矢量图，缩放不会模糊。

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