React Native 中的下拉菜单

Question

我有一个用例，我想加载一个下拉菜单，单击输入字段时可滚动，然后 select 从中加载一个值。

我想知道我们如何做到这一点。首选哪个库或可以在此处使用哪个库来实现此目的

我试着上网冲浪，但我找不到任何具体的东西，图书馆有很多，但我不确定应该使用哪一个。我也尝试过使用选择器，但我不想将列表呈现为中心的弹出窗口，而是从输入字段呈现。

提前致谢

Answer 1

你可以试试react-native-element-dropdown

      import React, { useState } from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      import { Dropdown } from 'react-native-element-dropdown';
      import AntDesign from 'react-native-vector-icons/AntDesign';
    
      const data = [
        { label: 'Item 1', value: '1' },
        { label: 'Item 2', value: '2' },
        { label: 'Item 3', value: '3' },
        { label: 'Item 4', value: '4' },
        { label: 'Item 5', value: '5' },
        { label: 'Item 6', value: '6' },
        { label: 'Item 7', value: '7' },
        { label: 'Item 8', value: '8' },
      ];
    
      const DropdownComponent = () => {
        const [value, setValue] = useState(null);
        const [isFocus, setIsFocus] = useState(false);
    
        const renderLabel = () => {
          if (value || isFocus) {
            return (
              <Text style={[styles.label, isFocus && { color: 'blue' }]}>
                Dropdown label
              </Text>
            );
          }
          return null;
        };
    
        return (
          <View style={styles.container}>
            {renderLabel()}
            <Dropdown
              style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
              placeholderStyle={styles.placeholderStyle}
              selectedTextStyle={styles.selectedTextStyle}
              inputSearchStyle={styles.inputSearchStyle}
              iconStyle={styles.iconStyle}
              data={data}
              search
              maxHeight={300}
              labelField="label"
              valueField="value"
              placeholder={!isFocus ? 'Select item' : '...'}
              searchPlaceholder="Search..."
              value={value}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
              onChange={item => {
                setValue(item.value);
                setIsFocus(false);
              }}
              renderLeftIcon={() => (
                <AntDesign
                  style={styles.icon}
                  color={isFocus ? 'blue' : 'black'}
                  name="Safety"
                  size={20}
                />
              )}
            />
          </View>
        );
      };
    
      export default DropdownComponent;
    
      const styles = StyleSheet.create({
        container: {
          backgroundColor: 'white',
          padding: 16,
        },
        dropdown: {
          height: 50,
          borderColor: 'gray',
          borderWidth: 0.5,
          borderRadius: 8,
          paddingHorizontal: 8,
        },
        icon: {
          marginRight: 5,
        },
        label: {
          position: 'absolute',
          backgroundColor: 'white',
          left: 22,
          top: 8,
          zIndex: 999,
          paddingHorizontal: 8,
          fontSize: 14,
        },
        placeholderStyle: {
          fontSize: 16,
        },
        selectedTextStyle: {
          fontSize: 16,
        },
        iconStyle: {
          width: 20,
          height: 20,
        },
        inputSearchStyle: {
          height: 40,
          fontSize: 16,
        },
      });

React Native 中的下拉菜单

Dropdowns in React Native

onclick

react-native

dropdown