如何从下拉选择器 React Native 中显示和选择项目

Question

I wanna create an picker dropdown inside my React Native app. I use React Native dropdown picker for this. With my current implementation I am only able to display something what looks like a dropdown list but I cannot open it and select the items which I added in my code. What do I miss?

Here is my implementation:

import DropDownPicker from "react-native-dropdown-picker";
import { View } from "react-native";

const Test = () => {
  return (
    <View>
      <DropDownPicker
        items={[
          { label: "Item 1", value: "item1" },
          { label: "Item 2", value: "item2", selected: true },
        ]}
        onChangeItem={(item) => console.log(item.label, item.value)}
      />
    </View>
  );
};

Answer 1

The documentation that you are looking at did not provide the code for a proper usage. The actual documentation is here .

import DropDownPicker from 'react-native-dropdown-picker';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}