javascript - 缩略图的背景颜色

Question

我正在使用缩略图。在 iconfinder 图像中，cross是透明的并采用 main 的背景颜色container。

我希望十字架是白色的，周围是黑色的。

export const Screen: React.FunctionComponent = () => {

  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
        <View style={styles.iconsContainer}>
        <TouchableOpacity
          style={styles.cross}>
          <Thumbnail
            source={{
              uri:
                'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',
            }}
          />
        </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,
  },

});

cross如果我向或添加背景颜色TouchableOpacity，则会出现超出缩略图的白色块。我还能如何实现这一目标？

如果我向缩略图本身添加样式：

  thumbnail:{
    backgroundColor: 'white',
  }

我明白了，这不是我想要的。我不想要边框轮廓。

缩略图： https ://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png

标签： javascriptcssreactjstypescriptreact-native

Answer 1

我不认为这是边框轮廓...尝试减小图标容器/白色区域的半径以匹配您正在使用的 png 文件的半径。