为缩略图添加背景颜色答案

【问题标题】：add background color to thumbnail为缩略图添加背景颜色
【发布时间】：2020-08-25 11:53:52
【问题描述】：

我正在使用一个缩略图，其中cross 是透明的，并采用主container 的背景颜色。我希望十字架是白色的。

export const FriendDetailsScreen: React.FunctionComponent = () => {
  const navigation = useNavigation();
  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 添加背景颜色，则会出现超出缩略图的白色块。我还能如何做到这一点？

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

【问题讨论】：

标签： javascript css reactjs typescript react-native

【解决方案1】：

您是否尝试过像这样将样式道具传递给缩略图？

export const FriendDetailsScreen: React.FunctionComponent = () => {
  const navigation = useNavigation();
  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
        <View style={styles.iconsContainer}>
        <TouchableOpacity
          style={styles.cross}>
          <Thumbnail
            style={styles.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,
  },
thumbnail: {
    backgroundColor: '#323443'
  }

});

【讨论】：