react-native - 如何在 react-native 中使用多滑块将厘米值转换为英尺？

Question

当我使用多滑块时，我遇到的一个问题是，当我滚动滑块时，我只得到了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>
            );
        }
    }

标签： react-native

Answer 1

您可以创建一个返回英尺值的函数，例如

 const convertedCentoFeet = (values) => {
  var realFeet = ((values * 0.393700) / 12);
  var feet = Math.floor(realFeet);
  var inches = Math.round((realFeet - feet) * 12);
  return feet+"'"+inches;
}

然后像使用它

 <Text style={styles.text}>({convertedCentoFeet(this.state.multiSliderValue[0])}"))</Text>