如何将此功能组件更改为基于 class 的 React Native 组件？

Question

我正在尝试将这个基于功能的组件更改为基于 class 的组件，以便我可以使用从左右滑块游标获取的值来设置状态。


import React, { useState } from "react";

import { StyleSheet, View, Text } from "react-native";

import MultiSlider from "@ptomasroos/react-native-multi-slider";
import CustomMarker from "./CustomMarker";

const App = () => {
  const [
    nonCollidingMultiSliderValue,
    setNonCollidingMultiSliderValue
  ] = useState([0, 100]);

  const nonCollidingMultiSliderValuesChange = (values) => {
    console.log(values);

    setNonCollidingMultiSliderValue(values);
  };

  return (
    <View style={styles.container}>
      <Text>MultiSlider</Text>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: 10,
          width: "310px"
        }}
      >
        <View>
          <Text
            style={[
              { fontStyle: "italic" },
              { fontSize: 14, color: "#E4E4E4" }
            ]}
          >
            Min
          </Text>
          <Text
            style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
          >
            {nonCollidingMultiSliderValue[0]}€
          </Text>
        </View>
        <View>
          <Text
            style={[
              { fontStyle: "italic" },
              { textAlign: "right", fontSize: 14, color: "#E4E4E4" }
            ]}
          >
            Max
          </Text>
          <Text
            style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
          >
            {nonCollidingMultiSliderValue[1]}€
          </Text>
        </View>
      </View>
      <MultiSlider
        values={[
          nonCollidingMultiSliderValue[0],
          nonCollidingMultiSliderValue[1]
        ]}
        onValuesChange={nonCollidingMultiSliderValuesChange}
        min={0}
        max={100}
        step={1}
        snapped
        allowOverlap={false}
        // minMarkerOverlapDistance={40}
        minMarkerOverlapStepDistance={40}
        customMarker={CustomMarker}
        trackStyle={{
          height: 5,
          borderRadius: 8
        }}
        // containerStyle={{
        //   width: "100%",
        //   flexDirection: "column",
        //   justifyContent: "center",
        //   alignItems: "center"
        // }}
        selectedStyle={{
          backgroundColor: "orange"
        }}
        unselectedStyle={{
          backgroundColor: "#ABB5B6"
        }}
      />
    </View>
  );
};

export default App;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    width: "100%"
  }
});

我已经试过了，但我无法单独获取滑块的值和 setState。

这是我的代码：

MultiSlider
                            values={[this.state.rangeLow, this.state.rangeHigh]}
                            isMarkersSeparated={true}
                            customMarker={CustomMarker}
                            onValuesChange={(values) => {
                              this.setState({
                                rangeLow :values, rangeHigh: values,
                              });
                            }}
                            enabledOne
                            enabledTwo
                            min={0}
                            max={500}
                            step={1}
                            snapped
                            showSteps={true}
                            trackStyle={{
                              height: 5,
                              borderRadius: 8,
                            }}
/>

一切正常，但值是这样的 0-0，当光标移动时，两边的值相同。但是有了功能组件，一切都很好。

如何更改为基于 class 的组件？

Answer 1

你的问题出在你的 onValuesChange prop:

onValuesChange = {(values) => {
    this.setState({
        [rangeLow, rangeHigh]: values,
    });
}}

不允许像JavaScript中那样使用数组解构。改用这个：

onValuesChange = {(values) => {
    this.setState({
        rangeLow: values[0], rangeHigh: values[1],
    });
}}

或者使用解构的不同语法：

onValuesChange = {([ rangeLow, rangeHigh ]) => {
    this.setState({ rangeLow, rangeHigh });
}}

如何将此功能组件更改为基于 class 的 React Native 组件？

How can I change this functional component into a class based component in react native?

javascript

reactjs

react-native

react-hooks

react-class-based-component