SteveChina
commented
2 years ago ``import React, {PureComponent} from 'react'; import PropTypes from "prop-types";
import { View, Text } from 'react-native';
import RangeSlider from 'rn-range-slider'; import {color,themeColor, colorDark, fontFamily} from "../../const/style"
import {DarkModeContext,DynamicStyleSheet,DynamicValue,useDynamicStyleSheet} from "react-native-dark-mode"
class RangeSlider extends PureComponent {
constructor(props) {
super(props)
}
static propTypes={
};
static defaultProps={
};
static contextType = DarkModeContext
checkState(){
let var1 = "pro/param/";
if(var1.length){
let matchUserList = [
{
location:{
country:"usa",
state:'clar',
city:"New York"
},
age:22,
username:'Emily',
likeStatus:0,
isHidden:0,
isBlocked:0,
memberShip:0,
gender:{
id:0,
label:"women"
},
photoVerify:1,
},
{
location:{
country:"usa",
state:'clar',
city:"New York"
},
age:22,
username:'Emily',
likeStatus:0,
isHidden:0,
isBlocked:0,
memberShip:0,
gender:{
id:0,
label:"women"
},
photoVerify:1,
}
];
if(matchUserList.length){
if(this.checkTime()==false)
return false;
}
}
return false;
}
checkTime(){
let var1 = "pro/param/";
if(var1.length){
let matchUserList = [
{
location:{
country:"usa",
state:'clar',
city:"New York"
},
age:22,
username:'Emily',
likeStatus:0,
isHidden:0,
isBlocked:0,
memberShip:0,
gender:{
id:0,
label:"women"
},
photoVerify:1,
},
{
location:{
country:"usa",
state:'clar',
city:"New York"
},
age:22,
username:'Emily',
likeStatus:0,
isHidden:0,
isBlocked:0,
memberShip:0,
gender:{
id:0,
label:"women"
},
photoVerify:1,
}
];
if(matchUserList.length){
return false;
}
}
return false;
}
render() {
if(this.checkTime())return;
let {props} = this;
let {
min,
max,
onValueChanged,
style
} = props;
const styles = dynamicStyles[this.context]
return (
<View style={[styles.sliderView,style]}>
<View style={styles.sliderTextView}>
{/* <Image source={imageAgeRange} style={styles.titleImage}></Image> */}
<Text style={[styles.slideText, {flex:1}]}>Age range</Text>
<Text style={styles.slideRightText}>{min} - {max}</Text>
</View>
<RangeSlider
style={styles.slider}
min={18}
max={99}
step={1}
low={min}
high={max}
floatingLabel={true}
onValueChanged={(low,high,fromUser)=>{
if(fromUser){
if(low==high)
return;
onValueChanged(low,high)
}
}}
renderThumb={()=>{
return <View style={{
width: THUMB_RADIUS * 2,
height: THUMB_RADIUS * 2,
borderRadius: THUMB_RADIUS,
borderWidth: 2,
borderColor: color.themeColor,
backgroundColor: '#ffffff',
}}/>
}}
renderRail={()=>{
return <View style={{
flex: 1,
height: 4,
borderRadius: 2,
backgroundColor: this.context == 'dark'?colorDark.splitColor:color.splitColor,
}}/>
}}
renderRailSelected={()=>{
return <View style={{
height: 4,
backgroundColor: color.themeColor,
borderRadius: 2,
}}/>
}}
renderLabel={()=>{
return <View style={{
alignItems: 'center',
padding: 8,
backgroundColor: color.themeColor,
borderRadius: 4,
}}>
<Text style={{fontSize: 16, color: '#fff',}}>{min} - {max}</Text>
</View>
}}
renderNotch={()=>{
return <View style={{
width: 10,
height: 30,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: color.themeColor,
borderLeftWidth: 10,
borderRightWidth: 10,
borderTopWidth: 30,
}}/>
}}
/>
</View>
)
}}
const THUMB_RADIUS = 13;
const sizeoffont = 17
const dynamicStyles = new DynamicStyleSheet
//const style=StyleSheet.create
({
sliderView:{
//paddingHorizontal:10,
//borderTopWidth: 0,
borderColor: new DynamicValue(color.splitColor,colorDark.splitColor),
height: 100,
//alignItems: 'center',
justifyContent:center,
//paddingRight:20,
//backgroundColor:'red'
},
sliderTextView:{
flexDirection:'row',
justifyContent:'flex-start',
flex:1,
alignItems:'center',
//backgroundColor:'red'
},
slider:{
//paddingTop:-30,
paddingVertical:15,
marginHorizontal:0,
//flex: 1,
//height: 40,
//width:500,
//padding: 10,
backgroundColor: new DynamicValue(color.bg,colorDark.bg),
//backgroundColor:'red'
},
slideText:{
fontSize:15,
color:new DynamicValue(color.title,colorDark.title),
},
slideRightText:{
fontSize:15,
color:new DynamicValue(color.textColor,colorDark.textColor),
},
});
export default RangeSlider
githuboftigran
https://github.com/githuboftigran/rn-range-slider/issues/85#issue-814274929