问题
I'd like to use a Slider on Android using React Native.
Custom tracking images and thumb are iOS only properties, so what are the available options on Android to style the track and the thumb?
More specifically I'm looking for a way to change the color of the thumb, the color of min/max track, and their thickness...
回答1:
May be too late but will be useful
My CustomSlider.js
import React, { Component } from 'react';
import {
View,
TouchableWithoutFeedback,
TouchableOpacity,
Dimensions,
Text,
Slider
} from 'react-native';
import { connect} from 'react-redux';
import rnfs from 'react-native-fs';
class CustomSlider extends Component {
state={
slideValue: 0,
}
render() {
const width = Dimensions.get('window').width;
const sliderStyle = {
sliderDummy: {
backgroundColor: '#d3d3d3',
width: 300,
height:30,
borderRadius: 50,
position: 'absolute',
},
sliderReal: {
backgroundColor: '#119EC2',
width: (this.state.slideValue/50) * 300,
height:30,
}
}
return(
<View style={{borderRadius: 50, overflow: 'hidden'}}>
<View style={{flexDirection: 'row', position: 'absolute'}}>
<View style={sliderStyle.sliderDummy}></View>
<View style={sliderStyle.sliderReal}></View>
</View>
<Slider
style={{width: 300, height: 30, borderRadius: 50}}
minimumValue={0}
maximumValue={50}
value={this.state.slideValue}
onValueChange={(value)=> this.setState({ slideValue: value}) }
maximumTrackTintColor='transparent'
minimumTrackTintColor='transparent'
/>
</View>
);
}
};
const mapDispatchToProps = {
};
const mapStateToProps = (state) => {
return{
}
};
export default connect(mapStateToProps, mapDispatchToProps)(CustomSlider);
You will achieve the thickness and custom slider like the one below.
回答2:
As of version 0.42.0, there is now some support for styling Android sliders with the RN Slider component.
See the pull request for more details, or see the docs for more information.
The props that should be usable for Android are:
- thumbTintColor
- minimumTrackTintColor
- maximumTrackTintColor
回答3:
It's not a first for React Native to have a component customizable on only one platform. Until React Native will add support for styling the Slider component, I suggest implementing it as a Native UI Component on Android: https://facebook.github.io/react-native/docs/native-components-android.html
I know I don't have an easy fix, but since Android support for React Native was added a while after iOS, I think there might still be a while until it catches up.
来源：https://stackoverflow.com/questions/39665617/how-to-style-a-slider-on-android-with-react-native