如何在 react-native 中使用 dropdown/picker 制作 TextInput？

Question

我需要创建一个文本输入，在您开始输入时立即显示项目列表。并且只有那些项目（在列表中）可以 selected 作为输入选项。我尝试使用选择器组件，但我需要添加一个功能，用户可以在其中输入内容，与之相关的项目将显示在 dropdown/picker 中，然后用户将能够 select 其中一个作为选项。

Answer 1

如果你想用你自己的定制设计来制作它，那就用这样的东西：

  const [filterBankList, setFilterBankList] = useState([]);
  const [bankName, setBankName] = useState('');


            <TextInput
                  value={bankName}
                  placeholder={strings.selectBankName}
                  style = {styles.textInput}
                  onChangeText={filterBanks}
                />
                <FlatList
                  data={filterBankList}
                  renderItem={({item, index}) => (
                    <TouchableOpacity
                      onPress={() => onBankSelected(item?.bank)}>
                      <VariantsBox>
                        <Text
                          >
                          {item?.bank || ''}
                        </Text>
                      </VariantsBox>
                    </TouchableOpacity>
                  )}
                  keyExtractor={item => item.bank}
                />

在您的 filterBanks 方法中，您可以更新 filterBankList，以便使用银行名称更新平面列表。

const filterBanks = value => {
    
    let filterData =
      bankList && bankList?.length > 0
        ? bankList?.filter(data =>
            data?.bank?.toLowerCase()?.includes(value?.toLowerCase()),
          )
        : [];
    setFilterBankList([...filterData]);
  };

在您的 onBankSelected（当您选择其中一个选项时调用）内，然后只需设置银行名称并清空过滤器列表。

const onBankSelected = value => {
    setBankName(value);
    setFilterBankList([]);
  };

如果你想使用一些库来避免这种情况，你可以使用 react-native-searchable-dropdown

如何在 react-native 中使用 dropdown/picker 制作 TextInput？

how to make TextInput with dropdown/picker in react-native?

javascript

user-input

reactjs

react-native