react-native - 如何从 RNPickerSelect 制作 SearchableDropdown？

Question

我有这个 RNPickerSelect 向我展示了很多数据，我需要创建一个 SearchableDropdown 或类似的想法，这样我就可以输入一个 fuw 字母，然后我会从这些字母中获得一个项目的下拉列表。有人能帮我吗？？？

这是我的选择器

                  <View style={{width: '100%'}}>
                    <Text style={[styles.label]}>Vendor</Text>
                    <RNPickerSelect  
                      style={{
                        inputAndroid: styles.dropdownAndroid,
                        inputIOS: styles.dropdownIOS,
                        placeholder: styles.dropdownPlaceholder,
                        iconContainer: styles.dropwownIcon
                      }}
                      onValueChange={(value) =>  this.setState({...this.state, searchVendor: value})}
                      value={this.state.searchVendor}
                      items={this.state.vendorsList}
                      useNativeAndroidPickerStyle={false}
                      Icon={() => {
                        return <EvilIcons name="chevron-down" size={37} color="#333" />
                      }}
                    />
                   </View>

这是我在网上找到的 SearchableDropdown

     <SearchableDropdown
        onItemSelect={(item) => {
          const items = this.state.selectedItems;
          items.push(item)
          this.setState({ selectedItems: items });
        }}
        containerStyle={{ padding: 5 }}
        onRemoveItem={(item, index) => {
          const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
          this.setState({ selectedItems: items });
        }}
        itemStyle={{
          padding: 10,
          marginTop: 2,
          backgroundColor: '#ddd',
          borderColor: '#bbb',
          borderWidth: 1,
          borderRadius: 5,
        }}
        itemTextStyle={{ color: '#222' }}
        itemsContainerStyle={{ maxHeight: 140 }}
        items={items}
        defaultIndex={2}
        resetValue={false}
        textInputProps={
          {
            placeholder: "placeholder",
            underlineColorAndroid: "transparent",
            style: {
                padding: 12,
                borderWidth: 1,
                borderColor: '#ccc',
                borderRadius: 5,
            },
            onTextChange: text => alert(text)
          }
        }
        listProps={
          {
            nestedScrollEnabled: true,
          }
        }
    />

我不知道是否有更简单的方法来制作带有下拉菜单的 textinpu 我刚刚找到了这个 searchabledropdown。谢谢你。

标签： react-native