为缩略图添加背景色

Question

我正在使用一个缩略图，其中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

Answer 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'
}
});