react-native - 带有滑块范围和过滤的问题

Question

当我在滑块范围中设置有限值时，我想实现，当我单击过滤器按钮时，它将仅从 API 显示所选范围之间的数据。

我只根据 API 实现了最小值和最大值。

主屏幕： - 在此屏幕中，我实现了一个过滤器按钮，当我单击该过滤器按钮时，它显示一个底部工作表，其中包含一个范围滑块和过滤按钮。

const AllSalaryScreen = (props) => {
  const getAllSalaryAPIData = useSelector(
    (state) => state.getAllSalaryAPIResponseReducer.getAllSalaryResponseData
  );
  console.log(getAllSalaryAPIData);
  //const [filter, setFilter] = useState(0);
  //const [filter, setFilter] = useState(0);

  const refRBSheet = useRef();

  const demo = getAllSalaryAPIData;
  // let sort = JSON.stringify(demo);

  let amountArray = demo.map((extractedData) => {
    return extractedData["NETO_TASHLUM"];
  });
  let amountArraySort = amountArray.sort();
  const min = amountArraySort[0];
  console.log(min);
  const max = amountArraySort[amountArraySort.length - 1];
  console.log(max);
  const sortedData = () => {
    for (var i = 0; i < sort.length; i++) {
      // console.log(sort[i]);
    }
  };
  // const low = () => {};
  // const high = () => {};
  return (
    <>
      {false ? (
        <ActivityIndicatorView>
          <ActivityIndicator size="large" color="#293C57" />
        </ActivityIndicatorView>
      ) : (
        <SafeArea>
          <View>
            <TouchableOpacity onPress={() => refRBSheet.current.open()}>
              <Image
                source={require("../../assets/filter.png")}
                style={{
                  height: 25,
                  width: 25,
                  marginRight: 350,
                  marginTop: 10,
                }}
              />
              
            </TouchableOpacity>
      </View>
      <RBSheet
        ref={refRBSheet}
        closeOnDragDown={true}
        closeOnPressMask={true}
        customStyles={{
          wrapper: {
            backgroundColor: "rgba(52,52,52,0.8)",
          },

          draggableIcon: {
            backgroundColor: "#000",
          },
        }}
      >
        <Text style={{ fontSize: 28, textAlign: "center" }}>
          סינון תלושי שכר לפי סכום
        </Text>
        <Slider
          min={min}
          max={max}
          // onChange={Salary} //  updating a state value
          // onChangeCommitted={} //  fetching new data
        />

        <FilledButton
          title={"סינון"}
          onPress={() => {
            sortedData;
          }}
        />
      </RBSheet>

slider.js : - 这是范围滑块屏幕，我将最小值和最大值作为主屏幕的道具。

  const [low, setLow] = useState(props.low);
  const [high, setHigh] = useState(props.high);
  const [min, setMin] = useState(props.min);
  const [max, setMax] = useState(props.max);
  //const [floatingLabel, setFloatingLabel] = useState(false);
  const renderThumb = useCallback(() => <Thumb />, []);
  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected />, []);
  const renderLabel = useCallback((value) => <Label text={value} />, []);
  const renderNotch = useCallback(() => <Notch />, []);
  const handleValueChange = useCallback((low, high) => {
    setLow(low);
    setHigh(high);
  }, []);
  console.log(low);
  console.log(high);
  const setMinTo50 = useCallback(() => setMin(50), []);
  const setMinTo0 = useCallback(() => setMin(0), []);
  const setMaxTo100 = useCallback(() => setMax(100), []);
  const setMaxTo500 = useCallback(() => setMax(500), []);
  return (
    <View style={styles.slider}>
      <RangeSlider
        min={min}
        max={max}
        step={1}
        floatingLabel={true}
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        renderLabel={renderLabel}
        renderNotch={renderNotch}
        setLow={min}
        onValueChanged={handleValueChange}
      />
      <View style={styles.horizontalContainer}>
        <Text style={styles.valueText}>{low}</Text>
        <Text style={styles.valueText}>{high}</Text>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  horizontalContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10,
  },
  valueText: {
    fontSize: 20,
  },
  slider: {
    marginLeft: 10,
    marginRight: 10,
  },
});

FilledButton.js:-- 这是过滤按钮。

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

   export default function FilledButton({ title, style, onPress }) {
     return (
       <TouchableOpacity style={[styles.container, style]} onPress={onPress}>
         <Text style={{ color: "white", fontSize: 22 }}>
           {title.toUpperCase()}
         </Text>
       </TouchableOpacity>
     );
   }