react-native-dropdown-picker 无法从 renderlistitem 中选择项目

Question

当我使用 RenderListItem 自定义列表项时，我遇到了麻烦。 我无法单击该列表中的项目，但我可以在普通列表上执行此操作（没有渲染列表）。

谁能解释一下为什么？

这是我的代码

/// 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}
   />

Answer 1

道具有一些方法，可以查看这个RenderListItem

下拉选择器 -

renderListItem={props => <Item {...props} />}

自定义项目组件 -

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>
  );
};

Answer 2

确保已安装

react-native-gesture-handler

并使用此叉子，检查它是否正常工作：

https://github.com/AmirDoreh/react-native-dropdown-picker 

Answer 3

我通过在自定义项目中添加 TouchableOpacity 解决了这个问题：

function handleListItemPress(props){
    props.onPress(props);
}

return (
    <DropDownPicker
        renderListItem={(props) => {
            return(<TouchableOpacity onPress={() => {handleListItemPress(props)}}><Text>{props.value}</Text></TouchableOpacity>);
        }}
    />
);

在TouchableOpacity中添加一个onPress，并在自己的方法中手动调用DropDownPicker的onPress函数。现在应该将您的自定义渲染项目添加到列表中！