feat: Add tintColor prop to Image component (#34534)
Summary: This adds the `tintColor` prop to the Image component to replace the non-standard `style.tintColor` as requested on https://github.com/facebook/react-native/issues/34424, so that React Native for Web does not have to deopt styles for Image rendering. I didn't have to change anything on Android as `tintColor` was already being passed down to the native component as a prop. This PR also updates RNTester ImageExample in order to facilitate the manual QA. ## Changelog [General] [Added] - Add tintColor prop to Image component Pull Request resolved: https://github.com/facebook/react-native/pull/34534 Test Plan: 1. Open the RNTester app and navigate to the Image page 2. Test the `tintColor` prop through the `Tint Color` section https://user-images.githubusercontent.com/11707729/187444761-ce5fd949-89f3-4d73-9717-31d035c6ee6b.mov Reviewed By: necolas Differential Revision: D39133292 Pulled By: jacdebug fbshipit-source-id: 314e0ed47ab65366153e730667a31554bc2b6aa7
This commit is contained in:
Родитель
3d82f7e7c7
Коммит
7a6f0e44b2
|
@ -129,7 +129,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
|
|||
// $FlowFixMe[prop-missing]
|
||||
const resizeMode = props.resizeMode || style.resizeMode || 'cover';
|
||||
// $FlowFixMe[prop-missing]
|
||||
const tintColor = style.tintColor;
|
||||
const tintColor = props.tintColor || style.tintColor;
|
||||
|
||||
if (props.src != null) {
|
||||
console.warn(
|
||||
|
|
|
@ -13,7 +13,11 @@
|
|||
import type {SyntheticEvent, LayoutEvent} from '../Types/CoreEventTypes';
|
||||
import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
|
||||
import type {ImageSource} from './ImageSource';
|
||||
import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
|
||||
import type {
|
||||
ColorValue,
|
||||
ViewStyleProp,
|
||||
ImageStyleProp,
|
||||
} from '../StyleSheet/StyleSheet';
|
||||
import type {ViewProps} from '../Components/View/ViewPropTypes';
|
||||
import type {Node, Ref} from 'react';
|
||||
import typeof Image from './Image';
|
||||
|
@ -170,6 +174,13 @@ export type ImageProps = {|
|
|||
*/
|
||||
testID?: ?string,
|
||||
|
||||
/**
|
||||
* Changes the color of all the non-transparent pixels to the tintColor.
|
||||
*
|
||||
* See https://reactnative.dev/docs/image#tintcolor
|
||||
*/
|
||||
tintColor?: ColorValue,
|
||||
|
||||
src?: empty,
|
||||
children?: empty,
|
||||
|};
|
||||
|
|
|
@ -937,11 +937,36 @@ exports.examples = [
|
|||
},
|
||||
{
|
||||
title: 'Tint Color',
|
||||
description: ('The `tintColor` style prop changes all the non-alpha ' +
|
||||
description: ('The `tintColor` prop changes all the non-alpha ' +
|
||||
'pixels to the tint color.': string),
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.horizontal}>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
|
||||
tintColor={'#5ac8fa'}
|
||||
/>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5}]}
|
||||
tintColor={'#4cd964'}
|
||||
/>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5}]}
|
||||
tintColor={'#ff2d55'}
|
||||
/>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5}]}
|
||||
tintColor={'#8e8e93'}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.sectionText}>
|
||||
It also works using the `tintColor` style prop
|
||||
</Text>
|
||||
<View style={styles.horizontal}>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
|
@ -960,6 +985,31 @@ exports.examples = [
|
|||
style={[styles.icon, {borderRadius: 5, tintColor: '#8e8e93'}]}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.sectionText}>
|
||||
The `tintColor` prop has precedence over the `tintColor` style prop
|
||||
</Text>
|
||||
<View style={styles.horizontal}>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa'}]}
|
||||
tintColor={'#5ac8fa'}
|
||||
/>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5, tintColor: '#4cd964'}]}
|
||||
tintColor={'#5ac8fa'}
|
||||
/>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
|
||||
tintColor={'#5ac8fa'}
|
||||
/>
|
||||
<Image
|
||||
source={require('../../assets/uie_thumb_normal.png')}
|
||||
style={[styles.icon, {borderRadius: 5, tintColor: '#8e8e93'}]}
|
||||
tintColor={'#5ac8fa'}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.sectionText}>
|
||||
It also works with downloaded images:
|
||||
</Text>
|
||||
|
|
Загрузка…
Ссылка в новой задаче