如何在react native中使用下拉/选取器进行TextInput

Question

我需要进行一个文本输入，在您开始键入时立即显示项目列表。并且只有那些项目(在列表中(可以被选择作为输入选项。我尝试过使用picker组件，但我需要添加一个功能，用户可以在其中键入，与之相关的项目将显示在下拉列表/picker中，然后用户可以选择其中一个作为选项。

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(当你选择了其中一个选项时，你会调用它(中，然后只需设置bankName并清空过滤器列表。

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

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