当我使用多滑块时,我遇到的一个问题是,当我滚动滑块时,我只得到了centimeter值,但我没有改变英尺值,所以我需要帮助来centimeter改变英尺值。
class App extends React.Component {
state = {
sliderOneChanging: false,
sliderOneValue: [5],
multiSliderValue: [122, 222],
};
multiSliderValuesChange = values => {
this.setState({
multiSliderValue: values,
});
};
render() {
return (
<View style={styles.container}>
<View style={styles.sliders}>
<View style={styles.sliderOne}>
<Text style={styles.text}>{this.state.multiSliderValue[0]} cm </Text>
<Text style={styles.text}>({this.state.multiSliderValue[0]})</Text>
</View>
</View>
<View style={styles.containerSlider}>
<MultiSlider
values={[
this.state.multiSliderValue[0],
]}
sliderLength={400}
onValuesChange={this.multiSliderValuesChange}
min={122}
max={222}
allowOverlap
snapped
selectedStyle={{
backgroundColor: 'pink',
}}
unselectedStyle={{
backgroundColor: 'silver',
}}
trackStyle={{
height: 2,
}}
/>
</View>
</View>
);
}
}
Run Code Online (Sandbox Code Playgroud)
您可以创建一个返回英尺值的函数,例如
const convertedCentoFeet = (values) => {
var realFeet = ((values * 0.393700) / 12);
var feet = Math.floor(realFeet);
var inches = Math.round((realFeet - feet) * 12);
return feet+"'"+inches;
}
Run Code Online (Sandbox Code Playgroud)
然后像这样使用它
<Text style={styles.text}>({convertedCentoFeet(this.state.multiSliderValue[0])}"))</Text>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
594 次 |
| 最近记录: |