推荐使用:RangeSlider —— 高度优化的React Native范围选择组件
import React from 'react';
import { View, Text } from 'react-native';
import RangeSlider from 'react-native-range-slider';
export default class RangeSliderExample extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedValues: { min: 25, max: 75 }
};
}
render() {
return (
<View>
<RangeSlider
values={this.state.selectedValues}
onSlidingComplete={(values) => this.setState({ selectedValues: values })}
minValue={0}
maxValue={100}
step={1}
/>
<Text>
选中的范围是: {this.state.selectedValues.min} - {this.state.selectedValues.max}
</Text>
</View>
);
}
}
这段代码演示了如何在React Native应用程序中使用RangeSlider
组件来让用户选择一个数值范围。它包括了一个范围滑块,用户可以拖动滑块来选择最小值和最大值,并在滑动结束后显示选中的范围。
评论已关闭