如何使用 react-native 中的滑块将公里值转换为英里？

Question

如何在 react-native 中使用滑块将公里值转换为英里？

我正在使用导入滑块的这一依赖项。

import Slider from "react-native-slider";

我想要这样的输出。当我点击 km 时，它会以公里为单位输出，当我点击 ml 时，它会以英里为单位输出。

export default class AdvanceFilter extends Component {
render(){
constructor(props) {
        super(props);
        this.state={
        distance: 100,
        minDistance: 0,
        maxDistance: 300,
        };}
return(
    <View style={styles.sliderdistance1}>
                        <Text style={styles.texthead}>Distance</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                            <Text style={styles.txtslider}>0 -</Text>
                            <Text style={styles.txtslider}>{this.state.distance}</Text>
                            <TouchableOpacity style={styles.txtsliderkm}><Text style={{ color: 'white', }}>Km</Text></TouchableOpacity>
                            <TouchableOpacity style={styles.txtsliderml}><Text style={{ color: 'black', }}>ml</Text></TouchableOpacity>

                        </View>
                    </View>
                    <View style={styles.sliderdistance2}>
                        <Slider
                            style={{ width: 370, marginLeft: 10, padding: 3, marginRight: 10 }}
                            step={1}
                            minimumValue={this.state.minDistance}
                            maximumValue={this.state.maxDistance}
                            value={this.state.distance}
                            onValueChange={val => this.setState({ distance: val })}
                            thumbTintColor='#FE5F63'
                            maximumTrackTintColor='gray'
                            minimumTrackTintColor='#FE5F63'

                        />
                    </View>
);
}
}
}

Answer 1

如果我没理解错的话，你说的是两件不同的事情。

如果要将公里换算为英里，则需要对此应用数学公式：KM_TO_M = KM * 0.621371 和 M_TO_KM = M * 1.609344。

要更改滑块，您可能需要更改您所在州的值。因此，您需要设置从 KM 变为 M 的 TouchableOpacity（或任何按钮）的操作，例如：

if (<going to miles mode>) {
  this.setState({
    distance = this.state.distance * 0.621371,
    minDistance: 0,
    maxDistance: 186, //aprox result of 300 * 0.621371
  });
} else if (<going to kilometers mode>) {
  this.setState({
    distance = this.state.distance * 1.609344,
    minDistance: 0,
    maxDistance: 300,
  })
}

记得根据需要应用舍入

Answer 2

您可以创建一个将公里转换为英里和 return 英里的函数

const convertKmToM = (values) => {
  // you can make change as per requirement 
  var realMiles = ( values * 0.621371 );
  var Miles = Math.floor(realMiles);
  return Miles;
}

Use this function like 

<Text>({convertKmToM(YOUR_VALUE_IN_KM)}))</Text>

如何使用 react-native 中的滑块将公里值转换为英里？

How to convert kilometers value into miles using slider in react-native?

react-native

react-native-android

react-native-ios