如何在react-native的react导航中制作下拉菜单？

npm install @react-navigation/native

npm install react-navigation/dropdown

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Dropdown } from 'react-navigation/dropdown';

const DropdownMenu = () => {
  const data = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ];

  const handleSelect = (value) => {
    console.log('Selected value:', value);
  };

  return (
    <View>
      <Dropdown
        data={data}
        onSelect={handleSelect}
        renderRow={(option, isSelected) => (
          <TouchableOpacity
            style={{ padding: 10, backgroundColor: isSelected ? 'gray' : 'white' }}
            onPress={() => option.onSelect(option.value)}
          >
            <Text>{option.label}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

export default DropdownMenu;

import React from 'react';
import { View } from 'react-native';
import DropdownMenu from './Dropdown';

const App = () => {
  return (
    <View>
      {/* 其他组件 */}
      <DropdownMenu />
      {/* 其他组件 */}
    </View>
  );
};

export default App;