[英]react-native-dropdown-picker Can't selected item from renderlistitem
I am having trouble that's when I use RenderListItem to customize the list item, I can't click on item in that list, But I can do it on a normal list (without renderlist)我遇到了麻烦,当我使用 RenderListItem 自定义列表项时,我无法单击该列表中的项目,但我可以在普通列表(没有渲染列表)上执行此操作
I don't know why我不知道为什么
Hope everyone can help me希望大家能帮助我
Thanks谢谢
this is my code这是我的代码
/// my state
const [openAgency, setOpenAgency] = useState(false);
const [agencyValue, setAgencyValue] = useState<string | null>(null);
const [agency, setAgency] = useState(DATA_AGENCY);
/// render item
const Item = (props: any) => {
return (
<View style={[styles.containerItem]} key={props.item}>
<Text style={styles.agencyName}>
{props.item.value}
</Text>
<Text style={styles.addressName}>
{props.item.address}
</Text>
</View>
)
}
/// dropdown list
<DropDownPicker
open={openAgency}
value={agencyValue}
items={agency}
setOpen={setOpenAgency}
setValue={setAgencyValue}
setItems={setAgency}
listMode="SCROLLVIEW"
style={styles.inputDistrict}
containerStyle={{
width: "100%",
}}
placeholder="Select an Agency"
selectedItemContainerStyle={{
backgroundColor: "#84E5FF",
}}
listItemLabelStyle={{
color: "#00355A"
}}
selectedItemLabelStyle={{
color: "#00355A"
}}
dropDownContainerStyle={{
marginTop: 4,
borderRadius: 10
}}
onSelectItem={(item) => {
console.log(item);
}}
renderListItem={(props) => <Item {...props} />}
zIndex={100}
/>
make sure react-native-gesture-handler
is installed and use this fork, check whether it is working or not:确保已安装
react-native-gesture-handler
并使用此 fork,检查它是否正常工作:
https://github.com/AmirDoreh/react-native-dropdown-picker
I fixed this issue by adding a TouchableOpacity in the custom item as such:我通过在自定义项中添加 TouchableOpacity 来解决此问题,如下所示:
function handleListItemPress(props){
props.onPress(props);
}
return (
<DropDownPicker
renderListItem={(props) => {
return(<TouchableOpacity onPress={() => {handleListItemPress(props)}}><Text>{props.value}</Text></TouchableOpacity>);
}}
/>
);
Add an onPress to the TouchableOpacity and manually call the DropDownPicker's onPress function in your own method.在 TouchableOpacity 中添加一个 onPress 并以自己的方法手动调用 DropDownPicker 的 onPress function。 It should now add your custom rendered item to the list!
它现在应该将您的自定义渲染项目添加到列表中!
The props have some methods, can check this RenderListItem道具有一些方法,可以查看这个RenderListItem
DropDownPicker -下拉选择器 -
renderListItem={props => <Item {...props} />}
Custom item component -自定义项目组件 -
const Item = props => {
return (
<TouchableOpacity onPress={() => props.onPress(props)} activeOpacity={0.5}>
<View style={styles.ItemContainer}>
<Text style={styles.ItemItem}>{props.item.label}</Text>
</View>
</TouchableOpacity>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.