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

Question

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

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

从“ 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

您可以创建一个将km转换为英里并返回英里的函数

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>