kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-26 07:04:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add option for both min/max track image.

Browse Source 
Summary:
This is a followup to PR #3850 but now separates min/max track images into different properties.
Closes #4476

Add examples for `minimumTrackTintColor`, `maximumTrackTintColor`, `minimumTrackImage`, `maximumTrackImage` to UIExplorer.
Closes https://github.com/facebook/react-native/pull/4586

Reviewed By: svcscm

Differential Revision: D2779193

Pulled By: nicklockwood

fb-gh-sync-id: 0510a0f496816baacdd0d4be0f3cd3a63a5a9865
This commit is contained in:
Christopher Dro
2015-12-21 10:29:21 -08:00
committed by facebook-github-bot-0
parent 41875eec47
commit 4cb775286c
12 changed files with 102 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
Libraries/Components/SliderIOS/SliderIOS.ios.js
View File

@@ -78,11 +78,24 @@ var SliderIOS = React.createClass({
*/
disabled: PropTypes.bool,
/**
* Sets an image for the track. It only supports images that are included as assets
/**
* Assigns a single image for the track. Only static images are supported.
* The center pixel of the image will be stretched to fill the track.
*/
trackImage: Image.propTypes.source,
/**
* Assigns a minimum track image. Only static images are supported. The
* rightmost pixel of the image will be stretched to fill the track.
*/
minimumTrackImage: Image.propTypes.source,
/**
* Assigns a maximum track image. Only static images are supported. The
* leftmost pixel of the image will be stretched to fill the track.
*/
maximumTrackImage: Image.propTypes.source,
/**
* Sets an image for the thumb. It only supports static images.
*/
@@ -107,28 +120,18 @@ var SliderIOS = React.createClass({
},
render: function() {
let {style, onValueChange, onSlidingComplete, ...props} = this.props;
props.style = [styles.slider, style];
let onValueChange = this.props.onValueChange && ((event: Event) => {
this.props.onValueChange &&
this.props.onValueChange(event.nativeEvent.value);
props.onValueChange = onValueChange && ((event: Event) => {
onValueChange && onValueChange(event.nativeEvent.value);
});
let onSlidingComplete = this.props.onSlidingComplete && ((event: Event) => {
this.props.onSlidingComplete &&
this.props.onSlidingComplete(event.nativeEvent.value);
props.onSlidingComplete = onSlidingComplete && ((event: Event) => {
onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
});
let {style, ...props} = this.props;
style = [styles.slider, style];
return (
<RCTSlider
{...props}
style={style}
onValueChange={onValueChange}
onSlidingComplete={onSlidingComplete}
/>
);
return <RCTSlider {...props}/>;
}
});