Как преобразовать значение в километрах в мили с помощью ползунка в реагировать на родной? - PullRequest
Новая
       6

Как преобразовать значение в километрах в мили с помощью ползунка в реагировать на родной?

2 голосов
/ 21 января 2020

Как преобразовать значение в километрах в мили с помощью ползунка в реагирующем родном?

Я использую эту зависимость для ползунка импорта. 

import Slider from "react-native-slider";

Я хочу что-то вроде этого вывода. Когда я нажимаю на км, это дает мне вывод, как в километрах, а когда я нажимаю на мл, тогда это дает мне вывод, как в милях.

enter image description here

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>
);
}
}
}

Ответы [ 2 ]

1 голос
/ 21 января 2020

Вы можете создать одну функцию, которая преобразует км в милю и возвращает милю 

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>
1 голос
/ 21 января 2020

Если я правильно понял, вы говорите о двух разных вещах.

Если вы хотите конвертировать из километров в мили, вам нужно применить формулу математического c к этому: KM_TO_M = KM * 0.621371 и M_TO_KM = M * 1.609344.

Чтобы изменить ползунок, вам, вероятно, необходимо изменить значения в вашем состоянии. Таким образом, вам нужно установить действие TouchableOpacity (или любой кнопки), которое изменяется с KM на M, что-то вроде: 

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,
  })
}

Remeber для применения округления по мере необходимости

...