Реагировать на нативный выпадающий поиск

Question

Я работаю над родным приложением React.Я ищу выпадающий список с возможностью поиска, который мне нужно реализовать во многих местах.

Ниже см. Видео ниже для справки:

Пример видео

Я реализовал ниже третьих сторон, но они не такие, как мне нужно:

1. https://www.npmjs.com/package/react-native-searchable-dropdown

2. https://www.npmjs.com/package/react-native-searchable-selectbox

3. https://github.com/toystars/react-native-multiple-select

Answer 1

попробуйте реализовать один:

const sports = ["Badminton","Cricket","Chess","Kho-Kho","Kabbadi","Hockey","Boxing","Football","Basketball","Volleyball","Tennis","Table Tennis"];

predict(){
    let q = this.state.query;
    let arr = sports.filter(ele => ele.toLowerCase().indexOf(q.toLowerCase()) != -1).splice(0,5);
    this.setState((prev = this.state)=>{
        let obj={};
        Object.assign(obj,prev);
        obj.predictions.splice(0,obj.predictions.length);
        arr.forEach(ele=>{
            obj.predictions.push({key : ele});
        });
        return obj;
    });
}

<TouchableWithoutFeedback onPress={()=>{this.setState({done : true})}}>
                <ScrollView
                    keyboardShouldPersistTaps='handled'
                    contentContainerStyle={style.content}
                >
                    <View>
                        <TextInput 
                            onChangeText={(text)=>{
                                this.setState({query : text , done : false});
                                this.predict();
                            }}  
                            placeholder="What do you want to play ?" 
                            placeholderTextColor="#A6A4A4"
                            value = {this.state.query}
                            onSubmitEditing = {()=>{this.setState({done : true})}}
                            underlineColorAndroid = "#0098fd"
                        ></TextInput>
                        <TouchableOpacity onPress={()=>{this.filteredEvents()}}><Icon name="search" color = "#0098fd" size = {20}></Icon></TouchableOpacity>
                    </View>


                    {
                        this.state.predictions.length != 0 && !this.state.done &&
                        <FlatList 
                            style={styles.predictor_view}
                            data={this.state.predictions}
                            extraData = {this.state}
                            renderItem = {
                                ({item})=>(
                                        <TouchableOpacity 
                                        style={styles.predictions} 
                                        onPress={()=>{
                                            console.log('ok');
                                            this.setState({query : item.key,done : true});
                                            console.log(this.state);
                                        }}>
                                            <Text>{item.key}</Text>
                                        </TouchableOpacity>
                                )
                            }
                        />
                    }
                </ScrollView>
            </TouchableWithoutFeedback>

Answer 2

Я пытался реализовать нечто подобное некоторое время назад, и в то время я отбросил идею выпадающего списка, поскольку это было несовместимо на обеих платформах, и я не мог найти идеальное решение.Я не вижу ваше видео, но думаю, что знаю, куда вы идете с этим.Вот мой совет: я хотел бы создать отдельный экран, который открывается при нажатии на этот компонент, который будет «выпадающим», и там создать список с возможностью поиска / фильтрации.Вы можете попробовать сделать это, используя это: https://www.npmjs.com/package/searchable-flatlist, или создать свой собственный плоский список, который очень прост и допускает больше настроек!РЕДАКТИРОВАТЬ: Если вы не хотите отдельный экран, используйте это: https://www.npmjs.com/package/react-native-searchable-dropdown