0

我正在 React Native Expo 中开发一个应用程序，它应该可以在移动设备和网络上运行。我对上述库有疑问

我应该如何在 react-native-dropdown-picker 中触发更改选择的操作？只有道具像

  open,
  setOpen,
  value,
  setValue,
  items,
  setItems,

open/setOpen 是一个布尔值，仅用于跟踪打开状态，items/setItems 是下拉形状预期的对象数组，因此似乎只有 setValue 可以完成这项工作。然而，值是一个名称字段始终为空的函数，我不知道如何以及是否可以使用它来处理任何操作，只有 useEffect 对值状态变量的变化做出反应。问题是它不应该发生在我认为的 useEffect 中，而是发生在事件处理程序中，而且我在移动设备上（包括网络和移动应用程序）有问题。这个组件适用于 React Native，但奇怪的是它可以像魅力一样在桌面上工作，而不是在移动应用程序和移动设备上。显然我做错了什么，我只是不知道是什么。这是组件代码

import React from "react";
import { Platform, StyleSheet, View } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import { FONTS, COLORS } from "../../constants/ui";

interface Props {
  open: boolean;
  value: string;
  items: any[];
  setOpen: React.Dispatch<any>;
  setValue: React.Dispatch<any>;
  setItems: React.Dispatch<any>;
}

export const PlatformDropdown: React.FC<Props> = ({
  open,
  setOpen,
  value,
  setValue,
  items,
  setItems,
}) => {
  return Platform.OS === "android" ? (
    <View style={[open && styles.dropdownCanvas]}>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        placeholder={`Rating`}
        showTickIcon={false}
        style={styles.dropdown}
        containerStyle={styles.dropdownContainerStyle}
        placeholderStyle={styles.dropdownPlaceholderStyle}
        dropDownContainerStyle={styles.dropDownContainerStyle}
        listItemLabelStyle={styles.dropdownListItemLabelStyle}
        selectedItemContainerStyle={styles.dropdownSelectedItemContainerStyle}
        zIndex={30}
      />
    </View>
  ) : (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      placeholder={`Rating`}
      showTickIcon={false}
      style={styles.dropdown}
      containerStyle={styles.dropdownContainerStyle}
      placeholderStyle={styles.dropdownPlaceholderStyle}
      dropDownContainerStyle={styles.dropDownContainerStyle}
      listItemLabelStyle={styles.dropdownListItemLabelStyle}
      selectedItemContainerStyle={styles.dropdownSelectedItemContainerStyle}
      zIndex={30}
    />
  );
};

const styles = StyleSheet.create({
  dropdown: {
    flexDirection: "row",
    padding: 10,
    maxWidth: "100%",
    backgroundColor: COLORS.greys["gray-300"],
    borderRadius: 7,
    marginVertical: 7,
  },
  dropdownContainerStyle: { borderColor: COLORS.greys["gray-400"] },
  dropdownPlaceholderStyle: {
    color: COLORS.FONT_COLOR,
    fontWeight: "bold",
  },
  dropDownContainerStyle: {
    backgroundColor: COLORS.greys["gray-100"],
    padding: 5,
    borderColor: COLORS.greys["gray-400"],
  },
  dropdownListItemLabelStyle: {
    color: COLORS.FONT_COLOR,
    padding: 10,
    fontFamily: FONTS.text,
  },
  dropdownSelectedItemContainerStyle: {
    backgroundColor: COLORS.greys["gray-300"],
    borderRadius: 3,
  },
  dropdownCanvas: { minHeight: 190 },
});

这是 useEffect 负责管理下拉选择的操作

  useEffect(() => {
    setLabs([]);
    switch (value) {
      case "rating":
        sortBy("rating", "desc");
        break;
      case "price":
        console.log(labs);
        const byPrice = labs.sort((a, b) => {
          const testIdx = a.tests.findIndex(({ title }) => title === testName);
          return a.tests[testIdx].price - b.tests[testIdx].price;
        });
        sortTimeoutRef = setTimeout(() => setLabs([...byPrice]), 200);
        break;
      case "distance":
        sortByDistance();
        break;
      default:
        sortBy("rating", "desc");
        break;
    }
    return () => {
      clearTimeout(sortTimeoutRef);
    };
  }, [value]);

非常感谢您的任何建议。

4

0 回答 0