react-native - react native 自动完成下拉列表

Question

我需要一个自动完成下拉菜单，例如 android autocomplete textview 但我找不到任何有用的东西

我尝试过使用像 react-native-autocomplete-input 这样的 React Native 库

• 这不是一个下拉列表，而是一个平面列表

• 它位于其他组件下

• 无法滚动项目，它占用了项目所需的空间

我尝试编写自己的自动完成功能，但它有同样的问题，我无法使其具有特定的高度并在具有 ScrollView 的其他屏幕内滚动。 我使用文本输入和平面列表来显示数据...。

我想我必须使用模式或其他东西

我需要一个与 android 组件完全一样工作的组件，或者至少是一个很好的替代品

Answer 1

是的，你是对的，你必须创建一个自定义模式或其他东西。如果您对react-native-autocomplete-input有疑问。

我给你举一个简单的例子。

Where i m using react-native-popup-menu for displaying types, you can check this github repo and can customize its style as you want.

运行此代码我希望它能解决您的问题。

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity,
    ScrollView
} from 'react-native';
import {
    Menu,
    MenuOption,
    MenuOptions,
    MenuTrigger,
    renderers,
    MenuProvider
  } from 'react-native-popup-menu';

  const { Popover } = renderers

export default class Demo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userName: '',
            email: '',
            number: '',
            typedata: [
            {type: 'hii'}, {type: 'hello'},
            {type: 'hamzas'}, {type: 'hazily'},
            {type: 'hazing'}, {type: 'halutz'}],
            data:[]

        };
    }


    onSubmit() {
        console.log('sumbmit');
    }

    searchFilterFunction = text => {
        this.setState({
            businessType: text,
        });
        if (this.state.typedata.length > 0) {
            const newData = this.state.typedata.filter(item => {
            const itemData = item.type.toUpperCase();
            const textData = text.toUpperCase();

            return itemData.indexOf(textData) > -1;
            });
            this.setState({
            data: newData,
            });
            if (newData.length > 0) {
                this.menu.menuCtx.menuActions.openMenu('typeSearch');
            } else {
                this.menu.menuCtx.menuActions.isMenuOpen('typeSearch') && this.menu.menuCtx.menuActions.closeMenu('typeSearch');
            }
        }
      };

    render() {
        return (
            <MenuProvider ref={(ref) => this.menu = ref} style={styles.container} customStyles={{ backdrop: {} }}>
                        <View style={styles.wrapper}>
                            <View style={styles.inputWrap}>
                                <TextInput 
                                    placeholder="Username" 
                                    placeholderTextColor="#FFF"
                                    style={styles.input} 
                                    keyboardType="default"
                                    onChangeText={(userName) => this.setState({ userName })}
                                />
                            </View>
                            <View style={styles.inputWrap}>

                                <TextInput 
                                    placeholderTextColor="#FFF"
                                    placeholder="Email" 
                                    style={styles.input} 
                                    secureTextEntry 
                                    keyboardType="email-address"
                                    onChangeText={(email) => this.setState({ email })}
                                />
                            </View>


                            <View style={styles.inputWrap}>
                                <TextInput 
                                    placeholderTextColor="#FFF"
                                    placeholder="Type." 
                                    style={styles.input}
                                    value={this.state.businessType}
                                    keyboardType="default"
                                    onChangeText={(businessType) => this.searchFilterFunction(businessType)}
                                />
                                <Menu name='typeSearch' renderer={Popover} rendererProps={{ preferredPlacement: 'bottom' }}>
                                    <MenuTrigger style={{top: 5}} >
                                    </MenuTrigger>

                                    <MenuOptions style={{ paddingHorizontal: 5 }}>
                                    <ScrollView style={{ maxHeight: 200 }}>
                                        { this.state.data.length > 0 && this.state.data.map((data,index) =>

                                            <MenuOption key={index} text={data.type} style={styles.menuFirstOption}
                                            onSelect={() => this.setState({ businessType: data.type })}/>

                                        )}
                                         </ScrollView>
                                    </MenuOptions>
                                </Menu>
                            </View>

                            <View style={styles.inputWrap}>

                                <TextInput 
                                    placeholderTextColor="#FFF"
                                    placeholder="Address." 
                                    style={styles.input} 
                                    keyboardType="default"
                                    onChangeText={(address) => this.setState({ address })}
                                />
                            </View>


                        </View>
                        <TouchableOpacity activeOpacity={.5} onPress={() => this.onSubmit()}>
                            <View style={styles.button}>
                                <Text style={styles.buttonText}>Submit</Text>
                            </View>
                        </TouchableOpacity>
            </MenuProvider>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    wrapper: {
        paddingVertical: 5,
        marginHorizontal: 20,
        backgroundColor: '#1A2854', 
        borderRadius: 10
    },
    inputWrap: {
        flexDirection: "row",
        marginVertical: 5,
        height: 38,
        borderBottomWidth: 1
    },
    input: {
        flex: 1,
        paddingHorizontal: 10,
        color: '#FFF'
    },
    button: {
        backgroundColor: "#BE39C5",
        paddingVertical: 10,
        alignItems: "center",
        justifyContent: "center",
        marginHorizontal: 20,
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10
    },
    buttonText: {
        color: "#FFF",
        fontSize: 18,
    },
    menuFirstOption: {
        height: 45,
        borderBottomColor: '#D8D8D8', 
        borderBottomWidth: 2,
        justifyContent: 'center',
        alignItems: 'center'
      }
});