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

【问题标题】：react-native-dropdown-picker Can't selected item from renderlistitemreact-native-dropdown-picker 无法从 renderlistitem 中选择项目
【发布时间】：2022-08-19 03:39:55
【问题描述】：

大家好

当我使用 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}
   />

标签： react-native mobile drop-down-menu components lib

【解决方案1】：

确保已安装 react-native-gesture-handler 并使用此 fork，检查它是否正常工作：

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

【讨论】：

【解决方案2】：

我通过在自定义项中添加 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 函数。它现在应该将您的自定义渲染项目添加到列表中！

【讨论】：