How to make a searchable droplist in react native to open an specific screen?

问题

I'm trying to make a search bar with a list,dropdown list,

how to make a search list lik this code:

 onPress={() =>this.props.navigation.navigate('LinhaDiurno03')

when an item is pressed?

....I want that each item in the list open a different screen in the application....

How can i to it?

here is the my teste:

Code to dropDown List

here some code:

 var items = [
  //name key is must.It is to show the text in front
  {id: 1, name: 'ANA RECH', prestadora: 'UNIDOS', pos: 'P01'},
  {id: 2, name: 'ARROIO DAS MARRECAS', prestadora: 'UNIDOS', pos: 'P01'},
  {id: 3, name: 'VILA SECA', prestadora: 'UNIDOS', pos: 'P01'},];

 onItemSelect={item => Alert.alert(" ", JSON.stringify(item.prestadora + ", LINHA: " + item.pos), [{ text: "open the especifc screen", onPress: () =>('some code here')},{ text: "bacvk", onPress: () => console.log("OK Pressed")}],{ cancelable: true })}
  //onItemSelect called after the selection from the dropdown

回答1:

I read the library API, you can set the navigation keys in the item, then in the onItemSelect to go to the special screen. the example code is below.

// in the item every element add a router key
const item = [
...
{
    id: 8,
    name: 'Swift',
    key:"the navigation params" //like the example LinhaDiurno03
  },
...
]

<SearchableDropdown
            multi={true}
            selectedItems={this.state.selectedItems}
            onItemSelect={(item) => {
              his.props.navigation.navigate(item.key)
            }}
/>

回答2:

Here is the final code, you just need to make the route before in your app... the full code

来源：https://stackoverflow.com/questions/58770848/how-to-make-a-searchable-droplist-in-react-native-to-open-an-specific-screen

标签

react-native

listview

routes