我终于找到了一个似乎适合我需要的下拉菜单,但是我在使用该工具时遇到了一些问题..
但这似乎也很简单,我认为那里没有问题。另一个想法是默认值/索引可能会有所帮助?但还没有成功..也许有人可以帮我找到解决方案,我将不胜感激:)
import ModalDropdown from 'react-native-modal-dropdown';
import { Card } from 'react-native-elements';
import React, { useState } from 'react';
function Home() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
let data = [{label: 'Choose', value: '0'}, {label: '1 foo', value: '1'}, {label: '2 foo', value: '2'}, {label: '3 foos', value: '3'}, {label: '4 foos', value: '4'}, {label: '5 foos', value: '5'}, {label: '6 foos', value: '6'}, {label: '7 foos', value: '7'}, {label: '8 foos', value: '8'}, {label: '9 foos', value: '9'}, {label: '10 foos', value: '10'}, {label: '11 foos', value: '11'}, {label: '12 foos', value: '12'}, {label: '13 foos', value: '13'}, {label: '14 foos', value: '14'}, {label: '15 foos', value: '15'}, {label: '16 foos', value: '16'}, {label: '17 foos', value: '17'}, {label: '18 foos', value: '18'}, {label: '19 foos', value: '19'}, {label: '20 foos', value: '20'}];
let data2 = ['1','2','3','4','5','6','7','8','9','10','11',]
const setItem = value => {
console.log("you touched option: " + value.value);
}
const renderDropDownList = (rowData) => {
return (
<View style={{backgroundColor: colors.cardBackgroundColor, alignItems: 'flex-end', marginLeft: 0}}>
<Text style={{color: colors.textSubtitleColor, fontSize: 12}}>{rowData.label}</Text>
</View>
);
}
const renderButtonText = (rowData) => {
const {label, value} = rowData;
return `${label}`;
};
return (
<Card containerStyle={{height:200, backgroundColor: 'gray'}}>
<ModalDropdown
options={data}
renderRow={(rowData) => renderDropDownList(rowData)}
renderButtonText={(rowData) => renderButtonText(rowData)}
style={{backgroundColor:'transparent', borderColor: 'gray'}}
dropdownStyle={{backgroundColor:'white', borderColor: 'gray', marginBottom: 2}}
onSelect={(idx, value) => setItem(value)}
/>
// ...
</Card>
);
};
export default Home;